javascript钟表的实现

最新推荐文章于 2024-07-29 11:53:27 发布

olchid

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量899

点赞数

分类专栏： Javascript脚本语言文章标签： javascript div function timer date html

本文链接：https://blog.csdn.net/olchid/article/details/1889065

版权

Javascript脚本语言专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
<head>
<script language="javascript">
var centerX=300;
var centerY=150;
var hands=new Array(13);
function hand(){
for(var i=1;i<13;i++){
       hands[i]=new Array(eval('hand'+i).style,0,0);
     }
}
function setdot(a,b,c){
eval('dot'+a+'.style.pixelTop='+(centerY+(c)));
eval('dot'+a+'.style.pixelLeft='+(centerX+(b)));
}

function runclock(){
for(var i=1;i<13;i++){
        hands[i][0].left=hands[i][1]+centerX;
        hands[i][0].top=hands[i][2]+centerY;
}
}
function timer(){
   var time=new Date();
   var sec=Math.PI*time.getSeconds()/30;
   var min=Math.PI*time.getMinutes()/30;
   var hr=Math.PI*((time.getHours()*60)+time.getMinutes())/360;
   for(var i=1;i<6;i++){
     hands[i][1]=Math.sin(sec)*(45-(i-1)*11)-2;
     hands[i][2]=-Math.cos(sec)*(45-(i-1)*11)-35;
}
   for(i=6;i<10;i++){
hands[i][1]=Math.sin(min)*(40-(i-6)*10)-2;
hands[i][2]=-Math.cos(min)*(40-(i-6)*10)-35;
}

   for(i=10;i<13;i++)
{hands[i][1]=Math.sin(hr)*(35-(i-10)*13)-2;
hands[i][2]=-Math.cos(hr)*(35-(i-10)*13)-35;
}}
function dotArray(){
setdot(1,25,-43);
setdot(2,43,-25);
setdot(3,50,0);
setdot(4,43,25);
setdot(5,25,43);
setdot(6,0,50);
setdot(7,-25,43);
setdot(8,-43,25);
setdot(9,-50,0);
setdot(10,-43,-25);
setdot(11,-25,-43);
setdot(12,0,-50);
}
</script>
<body onLoad="hand(),dotArray(),setInterval('timer()',500),setInterval('runclock()',500)">
<div id=dot1 style="font-size:11px;left:-120px;position:absolute;top:120px;z-index:5"><b>o</b></div>
<div id=dot2 style="font-size:11px;left:-120px;position:absolute;top:120px;z-index:5"><b>o</b></div>
<div id=dot3 style="font-size:11px;left:-120px;position:absolute;top:-120px;z-index:5"><b>o</b></div>
<div id=dot4 style="font-size:11px;left:-120px;position:absolute;top:-120px;z-index:5"><b>o</b></div>
<div id=dot5 style="font-size:11px;left:-120px;position:absolute;top:-120px;z-index:5"><b>o</b></div>
<div id=dot6 style="font-size:11px;left:-120px;position:absolute;top:-120px;z-index:5"><b>o</b></div>
<div id=dot7 style="font-size:11px;left:-120px;position:absolute;top:-120px;z-index:5"><b>o</b></div>
<div id=dot8 style="font-size:11px;left:-120px;position:absolute;top:-120px;z-index:5"><b>o</b></div>
<div id=dot9 style="font-size:11px;left:-120px;position:absolute;top:-120px;z-index:5"><b>o</b></div>
<div id=dot10 style="font-size:11px;left:1-20px;position:absolute;top:-120px;z-index:5"><b>o</b></div>
<div id=dot11 style="font-size:11px;left:-120px;position:absolute;top:-120px;z-index:5"><b>o</b></div>
<div id=dot12 style="font-size:11px;left:-120px;position:absolute;top:-120px;z-index:5"><b>o</b></div>
<div id=hand1 style="left:-120px;position:absolute;top:-120px;z-index:8">
<font color=#0000ff size=+3>.</font></div>
<div id=hand2 style="left:-120px;position:absolute;top:-120px;z-index:8">
<font color=#0000ff size=+3>.</font></div>
<div id=hand3 style="left:-120px;position:absolute;top:-120px;z-index:8">
<font color=#0000ff size=+3>.</font></div>
<div id=hand4 style="left:-120px;position:absolute;top:-120px;z-index:8">
<font color=#0000ff size=+3>.</font></div>
<div id=hand5 style="left:-120px;position:absolute;top:-120px;z-index:8">
<font color=#0000ff size=+3>.</font></div>
<div id=hand6 style="left:-120px;position:absolute;top:-120px;z-index:7">
<font color=#0000ff size=+3>.</font></div>
<div id=hand7 style="left:-120px;position:absolute;top:-120px;z-index:7">
<font color=#0000ff size=+3>.</font></div>
<div id=hand8 style="left:-120px;position:absolute;top:-120px;z-index:7">
<font color=#0000ff size=+3>.</font></div>
<div id=hand9 style="left:-120px;position:absolute;top:-120px;z-index:7">
<font color=#0000ff size=+3>.</font></div>
<div id=hand10 style="left:-120px;position:absolute;top:-120px;z-index:6">
<font color=#ff0000 size=+3>.</font></div>
<div id=hand11 style="left:-120px;position:absolute;top:-120px;z-index:6">
<font color=#ff0000 size=+3>.</font></div>
<div id=hand12 style="left:-120px;position:absolute;top:-120px;z-index:6">
<font color=#ff0000 size=+3>.</font></div>
</body>
</html>

olchid

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript钟表的实现

var centerX=300;var centerY=150;var hands=new Array(13);function hand(){for(var i=1;i hands[i]=new Array(eval(hand+i).style,0,0); }}function setdot(a,b,c){ eval(dot+a+.style.pixelTop=
复制链接

扫一扫

专栏目录