My Book

时钟

$(document).ready(function(){
    clock();
    $("#clock").fadeIn(1000);---------------------动态出现时钟

    function clock (){
        var date = new Date().getDate();----------获取到当前时间
        var h = new Date().getHours();
        var s = new Date().getSeconds();
        var m = new Date().getMinutes();
        $("date").html(date);

        var hd = h*30+m/2,md = m*6,sd = s*6;-----设置每个时针的偏移度数（技术点）

        $("#hour").css({"transform":"rotate("+hd+"deg)"},
                        '-moz-transform':'rotate('+ hd +'deg)',
                        '-webkit-transform'    :'rotate('+ hd +'deg)'
                        );-----设置旋转(考虑兼容性)

        $("#minutes").css({"transform":"rotate("+md+"deg)"});
        $("#seconds").css({"transform":"rotate("+sd+"deg)"});
    }

    setInterval(clock,1000);
});

html结构

<ul id="clock">
    <li id="date">9</li>
    <li id="hour"></li>
    <li id="minutes"></li>
    <li id="seconds"></li>
</ul>

css样式

body,html,ul,li {
padding: 0;
margin: 0;
}
body {
    background: #f9f9f9;
    color: #fff;
    font: 15px Arial, Helvetica, sans-serif;
    text-shadow: 1px 2px 1px #fff;
}
#clock {
    position: relative;
    width: 600px;
    height: 600px;
    list-style: none;
    margin: 20px auto;
    background: url("../images/clock.png") no-repeat center;
    display: none;
}
#hour,
#minutes,
#seconds {
    position: absolute;
    width: 30px;
    height: 580px;
    left: 270px;
}
#hour {
    background: url("../images/hands.png") no-repeat left;
    z-index: 10;
}
#minutes {
    background: url("../images/hands.png") no-repeat center;
    width: 25px;
    z-index: 20;
}
#seconds {
    background: url("../images/hands.png") no-repeat right;
    z-index: 30;
}
#date {
    position: absolute;
    top: 365px;
    right: 140px;
    color:#fff;
    font:bold 30px/36px Acens;
    text-shadow: 1px 2px 1px #000;
    letter-spacing: 3px;
}