<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js时钟效果</title><style>.clock{width: 600px;height: 600px;margin: 50px auto;background:url(images/clock.jpg) no-repeat;position: relative;}.clock div{width: 600px;height: 600px;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" id="clo"><div class="h"></div><div class="m"></div><div class="s"></div></div></body></html><script type="text/javascript">var clock = document.getElementById("clo");var h = 0, m = 0 , s =0, ms = 0;setInterval(function() {var date = new Date();ms = date.getMilliseconds();s = date.getSeconds()+ms/1000; m = date.getMinutes()+s/60; h = date.getHours() % 12+m/60; clock.children[0].style.WebkitTransform = "rotate("+h*30+"deg)";clock.children[1].style.WebkitTransform = "rotate("+m*6+"deg)";clock.children[2].style.WebkitTransform = "rotate("+s*6+"deg)";},50);</script>
这里随便附的几张图，代码中用到的也可以自行调换哦~
clock.jpg hour.png minute.png second.png
