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.οnlοad=function(){
rotate();
setInterval(rotate,1000);
}</span>