（效果图）
分两步进行的。
第一步： 要得到现在的 时 分 秒
但是这里面有一个小玄机 。
比如现在是 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>
附上需要的图片
