效果图：
代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><style>.clock {width: 600px;height: 600px;margin: 0 auto;background:url(img/clock.jpg) no-repeat;position: relative;}.clock div {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}.h {background:url(img/hour.png) no-repeat center center;}.m {background:url(img/minute.png) no-repeat center center;}.s {background: url(img/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();// 得到秒，如 1.3 s，通过毫秒计算小数位s= date.getSeconds()+ms/1000;// 得到分钟，如 45.6m，通过秒计算小数位m = date.getMinutes()+s/60;// 得到小时，如 4.6h，通过分钟计算小数位h=date.getHours()%12+m/60;// 计算并设置旋转角度// 一圈 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)";// 变化旋转de度minute.style.MozTransform = "rotate(" + m * 6 + "deg)";hour.style.MozTransform = "rotate(" + h * 30 + "deg)";}, 100);</script></body></html>
图片素材：（请放在img目录下）
时钟（clock.jpg）
时针（hour.png）
分针（minute.png）
秒针（second.png）
如果觉得《使用Javascript(js)技术实现动态时钟效果—北大青鸟》对你有帮助，请点赞、收藏，并留下你的观点哦！
