Для получения на своем сайте аналогичных идущих часов на 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>
Аналоговые часы на JavaScript
