Js版带表盘的时钟

来源：互联网发布：网络摄像头ip破解软件编辑：程序博客网时间：2024/04/30 21:51

html：

<span style="font-size:18px;"><!DOCTYPE html><html> <head>  <title>Js版带表盘的时钟</title>  <meta charset="utf-8"/>  <link rel="Stylesheet" href="css/4_2.css"/>  <script src="js/4_2.js"></script> </head> <body>  <div id="clock"><div id="h"></div><div id="m"></div><div id="s"></div><div id="a1">I</div><div id="a2">II</div><div id="a3">III</div><div id="a4">IIII</div><div id="a5">V</div><div id="a6">VI</div><div id="a7">VII</div><div id="a8">VIII</div><div id="a9">IX</div><div id="a10">X</div><div id="a11">XI</div><div id="a12">XII</div>  </div> </body></html></span>

js:

<span style="font-size:18px;">//1 任务: 每隔一秒计算三个指针旋转的角度function rotate(){  var now=new Date();//获得当前时间，保存在now中  var s=now.getSeconds();//获得now的s  var sDeg=6*s;//求秒针旋转的角度sDeg  var m=now.getMinutes();//获得now的m  var mDeg=6*(m+s/60);//求分针旋转的角度mDeg  var h=now.getHours();//获得now的h  h>12&&(h-=12);//将h换算成12小时制  var hDeg=(m/60+s/3600+h)*30;//求时针旋转的角度hDeg  //找到id为s的div，设置其style中的transform属性为:  document.getElementById("s").style.transform=    "rotate("+sDeg+"deg)";  //找到id为m的div，设置其style中的transform属性为:  document.getElementById("m").style.transform=    "rotate("+mDeg+"deg)";  //找到id为h的div，设置其style中的transform属性为:  document.getElementById("h").style.transform=    "rotate("+hDeg+"deg)";}window.onload=function(){  rotate();  setInterval(rotate,1000);}</span>

0 0