版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/f120032777/article/details/73656257
最终的效果图如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表</title> <style type="text/css"> * { margin: 0; padding: 0; } #clock { background: url(clock.jpg) no-repeat; margin: 0 auto; position: relative; } div { width: 600px; height: 600px; } #h, #m, #s { position: absolute; left: 0; top: 0; } #h { background: url(hour.png) no-repeat center center; } #m { background: url(minute.png) no-repeat center center; } #s { background: url(second.png) no-repeat center center; } </style> <script type="text/javascript"> window.onload=function(){ function go(){ var oh=document.getElementById("h"); //获取时针 var om=document.getElementById("m"); //获取分针 var os=document.getElementById("s"); //获取秒针
var time=new Date();var s= time. getSeconds()+ time. getMilliseconds()/ 1000;
os.style.transform="rotate("+s*6+"deg)"; //秒针一次转动的度数
var m=time.getMinutes();
om.style.transform="rotate("+m*6+"deg)"; //分针一次转动的度数
var h=time.getHours();
oh.style.transform="rotate("+h*30+"deg)"; //时针一次转动的度数
}
go()
setInterval(go,20)
}
</script>
</head>
<body>
<div id="clock">
<div id="h">
</div>
<div id="m">
</div>
<div id="s">
</div>
</div>
</body>
</html>