结构

样式

* {
        margin: 0; padding: 0; } .clock { position: relative; width: 600px; height: 600px; margin: 100px auto; background: #DBE1E7 url(../Images/clock.jpg) no-repeat; } .clock div { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: no-repeat center center; } .clock .hour { background-image: url(../Images/hour.png); } .clock .minute { background-image: url(../Images/minute.png); } .clock .second { background-image: url(../Images/second.png); }

行为

window.onload = function () { 　　var oClock = document.getElementById("clock"); var oHour = oClock.getElementsByTagName("div")[0]; var oMinute = oClock.getElementsByTagName("div")[1]; var oSecond = oClock.getElementsByTagName("div")[2]; var nHours=0,nMinutes=0,nSeconds= 0,nMilliseconds=0; setInterval(function() { var oDate = new Date(); /*毫秒*/ nMilliseconds = oDate.getMilliseconds(); /*秒*/ nSeconds = oDate.getSeconds()+nMilliseconds/1000; /*分*/ nMinutes = oDate.getMinutes()+nSeconds/60; /*时*/ nHours = oDate.getHours()%12+nMinutes/60;

　　oSecond.style.WebkitTransform = oSecond.style.MozTransform = "rotate("+6*nSeconds+"deg)"; 　　oMinute.style.WebkitTransform = oMinute.style.MozTransform = "rotate("+6*nMinutes+"deg)"; 　　oHour.style.WebkitTransform = oHour.style.MozTransform = "rotate("+30*nHours+"deg)"; },1000); }