（效果圖）
分兩步進行的。
第一步： 要得到現在的 時 分 秒
但是這里面有一個小玄機 。
比如現在是 9點整 時針指向 9 是沒錯的
但是如果現在是 9點半 時針應該指向的是 9到10 之間 才對
所以，我們不但要得到現在的小時 ，還要得到 已經過去了多少分
ms = date.getMilliseconds(); // 現在的毫秒數 s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s m = date.getMinutes() + s / 60; // 得到的是分數 45.6分鍾 h = date.getHours() % 12 + m / 60 ;
第二步：旋轉角度原理
秒針 一圈 360 ° 一共有 60 秒 每秒 6 °
分針 一圈 360 一圈走 60次 每次 6° 每分鍾 6°
時針 一圈 360 一共 12 個 表盤沒有24小時 每個小時 走 30°
完整代碼
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .clock { width: 600px; height: 600px; margin:50px auto; background: url(images/clock.jpg) no-repeat; position: relative; } .clock div { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .h { background: url(images/hour.png) no-repeat center center; } .m { background: url(images/minute.png) no-repeat center center; } .s { background: url(images/second.png) no-repeat center center; } </style> </head> <body> <div class="clock"> <div class="h" id="hour"></div> <div class="m" id="minute"></div> <div class="s" id="second"></div> </div> </body> </html>
<script> var hour = document.getElementById("hour"); var minute = document.getElementById("minute"); var second = document.getElementById("second"); // 開始定時器 var s = 0,m = 0, h = 0, ms = 0; setInterval(function() { // 內容就可以了 var date = new Date(); // 得到最新的時間 ms = date.getMilliseconds(); // 現在的毫秒數 s = date.getSeconds() + ms / 1000; // 得到秒 1.3 s m = date.getMinutes() + s / 60; // 得到的是分數 45.6分鍾 h = date.getHours() % 12 + m / 60 ; //console.log(h); //旋轉角度 // 一圈 360 ° 一共有 60 秒 每秒 6 ° 現在是 s秒 second.style.WebkitTransform = "rotate("+ s*6 +"deg)"; // 變化 旋轉 deg 度 minute.style.WebkitTransform = "rotate("+ m*6 +"deg)"; hour.style.WebkitTransform = "rotate("+ h*30 +"deg)"; second.style.MozTransform = "rotate("+ s*6 +"deg)"; // 變化 旋轉 deg 度 minute.style.MozTransform = "rotate("+ m*6 +"deg)"; hour.style.MozTransform = "rotate("+ h*30 +"deg)"; },100); </script>
附上需要的圖片
