基础 - 时钟

结构

<div class="clock" id="clock">    <div class="hour">    </div>    <div class="minute">    </div>    <div class="second">    </div></div>

样式

* {    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);}