用JavaScript製作鐘錶
阿新 • • 發佈：2018-11-21
最終的效果圖如下：
<!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>