JS用定時器製作時鐘
阿新 • • 發佈：2018-12-25
製作思路
1.首先需要時鐘的背景圖片，時針圖片，分針圖片，秒針圖片。鍾背景圖片固定（相對定位），時/分/秒針圖片旋轉（絕對定位）；
2.設定定時器；
3.獲取系統時間，時/分/秒/毫秒；
4.秒針圖片每秒旋轉6°，分針每分針旋轉6°，時針每小時旋轉30°。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #clock { position: relative; } #clock img{ position: absolute; } </style> </head> <body> <div id="clock"> <img src="img/clock.png" height="125" width="125"/>//時鐘4張圖片寬高一致，且寬等於高； <img src="img/h.png" height="125" width="125"/> <img src="img/m.png" height="125" width="125"/> <img src="img/s.png" height="125" width="125"/> </div> <script type="text/javascript"> var imgs = document.getElementsByTagName("img"); //設定定時器 setInterval(function () { // 3. 獲取資料 var $d = new Date(); var h = $d.getHours();// 獲取系統小時 var m = $d.getMinutes();//獲取系統分 var s = $d.getSeconds();//獲取系統秒 var ms = $d.getMilliseconds();//獲取系統毫秒 // 4. 邏輯計算 var _h = h+m/60;//如1點30分，即1.5小時，時針應旋轉45°，位於1點和2點的正中間； var _m = m+s/60; var _s = s+ms/1000; // 5. 應用資料 imgs[1].style.transform = "rotate("+(_h*30)+"deg)";//時針每小時旋轉30° imgs[2].style.transform = "rotate("+(_m*6)+"deg)"; imgs[3].style.transform = "rotate("+(_s*6)+"deg)"; },30); </script> </body> </html>