Многие вебмастера добавляют на свои сайты разнообразные часы. В данной теме мы рассмотрим JavaScript код для создания аналоговых часов, отображающих текущее время.

Для получения на своем сайте аналогичных идущих часов на JavaScript, воспользуйтесь кодом, расположенным ниже. Для корректного отображения аналоговых часов на своем сайте, рекомендуем Вам поместить данный код в отдельный файл, и подгружать его в iframe, иначе могут возникнуть сложности с размещением.

                        
<style type="text/css">

div.clock_style{

    width:30px; height:30px; padding-top:10px; font-size:11px; text-align:center; }

div.clock{

    position:absolute; top:0px; left:0px; }

div.clock2{

    position:absolute; width:2px; height:2px; font-size:2px; }

</style>



<script type="text/javascript">

Rad=45;

text_Col='0000FF'; sec_Col='FF0000';

min_Col='0000FF'; hr_Col='000000';

HH='....'; MM='......'; SS='........';

Y=X=Rad+15;



NS4=(document.layers);

NS6=(document.getElementById&&!document.all);

IE4=(document.all);

if (NS6){

for (i=1; i<13; i++){

document.write('<div id="Digits'+i+'" class="clock clock_style"

style="color:#'+text_Col+';">'+i+'</div>');

}

for (i=0; i<HH.length; i++){

document.write('<div id="Oz'+i+'" class="clock clock2"

style="background:#'+hr_Col+'"></div>');

}

for (i=0; i<MM.length; i++){

document.write('<div id="Oy'+i+'" class="clock clock2"

style="background:#'+min_Col+'"></div>');

}

for (i=0; i<SS.length; i++){

document.write('<div id="Ox'+i+'" class="clock clock2"

style="background:#'+sec_Col+'"></div>');

}

}

if (NS4){

dgts='1 2 3 4 5 6 7 8 9 10 11 12';

dgts=dgts.split(' ')

for (i=0; i<12; i++){

document.write('<layer name=Digits'+i+' top=0 left=0 height=30 width=30>

<center><font size=1 color='+text_Col+'>'+dgts[i]+'</font></center></layer>');

}

for (i=0; i<HH.length; i++){

document.write('<layer name=oz'+i+' top=0 left=0 bgcolor='+hr_Col+'

clip="0,0,2,2"></layer>');

}

for (i=0; i<MM.length; i++){

document.write('<layer name=oy'+i+' top=0 left=0 bgcolor='+min_Col+'

clip="0,0,2,2"></layer>');

}

for (i=0; i<SS.length; i++){

document.write('<layer name=ox'+i+' top=0 left=0 bgcolor='+sec_Col+'

clip="0,0,2,2"></layer>');

}

}

if (IE4){

document.write('<div class="clock"><div style="position:relative">');

for (i=1; i<13; i++){

document.write('<div id="Digits" class="clock clock_style"

style="color:'+text_Col+';">'+i+'</div>');

}

document.write('</div></div>')

document.write('<div class="clock"><div style="position:relative">');

for (i=0; i<HH.length; i++){

document.write('<div id=z class="clock2" style="background:'+hr_Col+'"></div>');

}

document.write('</div></div>')

document.write('<div class="clock"><div style="position:relative">');

for (i=0; i<MM.length; i++){

document.write('<div id=y class="clock2" style="background:'+min_Col+'"></div>');

}

document.write('</div></div>')

document.write('<div class="clock"><div style="position:relative">');

for (i=0; i<SS.length; i++){

document.write('<div id=x class="clock2" style="background:'+sec_Col+'"></div>');

}

document.write('</div></div>')

}



function start_clock(){

time=new Date();

sec=-1.57+Math.PI*time.getSeconds()/30;

min=-1.57+Math.PI*time.getMinutes()/30;

hr=-1.57+Math.PI*time.getHours()/6+Math.PI*parseInt(time.getMinutes())/360;

if (NS6){

for (i=1; i<13; i++){

 document.getElementById("Digits"+i).style.top=Y-15+Rad*Math.sin(-1.51+i*Math.PI/6)

 document.getElementById("Digits"+i).style.left=X-15+Rad*Math.cos(-1.51+i*Math.PI/6)

 }

for (i=0; i<HH.length; i++){

 document.getElementById("Oz"+i).style.top=Y+i*Rad/9*Math.sin(hr);

 document.getElementById("Oz"+i).style.left=X+i*Rad/9*Math.cos(hr);

 }

for (i=0; i<MM.length; i++){

 document.getElementById("Oy"+i).style.top=Y+i*Rad/9*Math.sin(min);

 document.getElementById("Oy"+i).style.left=X+i*Rad/9*Math.cos(min);

 }

for (i=0; i<SS.length; i++){

 document.getElementById("Ox"+i).style.top=Y+i*Rad/9*Math.sin(sec);

 document.getElementById("Ox"+i).style.left=X+i*Rad/9*Math.cos(sec);

 }

}

if (NS4){

for (i=0; i<12;++i){

 document.layers["Digits"+i].top=Y-5+Rad*Math.sin(-1.045+i*Math.PI/6)

 document.layers["Digits"+i].left=X-15+Rad*Math.cos(-1.045+i*Math.PI/6)

 }

for (i=0; i<HH.length; i++){

 document.layers["oz"+i].top=Y+i*Rad/9*Math.sin(hr);

 document.layers["oz"+i].left=X+i*Rad/9*Math.cos(hr);

 }

for (i=0; i<MM.length; i++){

 document.layers["oy"+i].top=Y+i*Rad/9*Math.sin(min);

 document.layers["oy"+i].left=X+i*Rad/9*Math.cos(min);

 }

for (i=0; i<SS.length; i++){

 document.layers["ox"+i].top=Y+i*Rad/9*Math.sin(sec);

 document.layers["ox"+i].left=X+i*Rad/9*Math.cos(sec);

 }

}

if (IE4){

for (i=0; i<12;++i){

 Digits[i].style.pixelTop=Y-15+Rad*Math.sin(-1.045+i*Math.PI/6)

 Digits[i].style.pixelLeft=X-15+Rad*Math.cos(-1.045+i*Math.PI/6)

 }

for (i=0; i<HH.length; i++){

 z[i].style.pixelTop=Y+i*Rad/9*Math.sin(hr);

 z[i].style.pixelLeft=X+i*Rad/9*Math.cos(hr);

 }

for (i=0; i<MM.length; i++){

 y[i].style.pixelTop=Y+i*Rad/9*Math.sin(min);

 y[i].style.pixelLeft=X+i*Rad/9*Math.cos(min);

 }

for (i=0; i<SS.length; i++){

 x[i].style.pixelTop=Y+i*Rad/9*Math.sin(sec);

 x[i].style.pixelLeft=X+i*Rad/9*Math.cos(sec);

 }

}

setTimeout('start_clock()',100);

}

start_clock();

</script>