基础 - 时钟

标签：

结构

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

基础 - 时钟

标签：

原文地址：http://www.cnblogs.com/WeWeZhang/p/5747936.html