网页时钟

使用HTML，CSS绘制一个时钟，效果图和素材如下图（注意指针可以旋转到任意位置）
clock

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>clock</title>
        
        <style>
.clock, .hand {
    background-image: url(clock1.png);
}

.clock {
    margin: 20px auto;
    position: relative;
    width: 760px;
    height: 730px;
    background-position: -198px -68px;
}

.hand {
    display: none;
    position: absolute;
    left: 356px;
    top: 114px;
    width: 50px;
    height: 350px;
    
    -webkit-transform-origin: center 254px;
    -moz-transform-origin: center 254px;
    -ms-transform-origin: center 254px;
    transform-origin: center 254px;
}

.hour {
    background-position: -112px 377px;
}

.minute {
    background-position: -63px 377px;
}

.second {
    background-position: -17px 377px;
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -ms-transition: -ms-transform 0.5s;
    transition: transform 0.5s;
}
        </style>
    </head>
    <body>
        <div class="clock">
            <div class="hour hand"></div>
            <div class="minute hand"></div>
            <div class="second hand"></div>
        </div>
        <script>
var hourHand = document.querySelector(".clock .hour"),
    minuteHand = document.querySelector(".clock .minute"),
    secondHand = document.querySelector(".clock .second");

update();
hourHand.style.display = "block";
minuteHand.style.display = "block";
secondHand.style.display = "block";

function update() {
    var time = new Date();
    var hh = time.getHours(),
        mm = time.getMinutes(),
        ss = time.getSeconds();
    
    var hhDeg = 360 * (hh * 3600 + mm * 60) / (12 * 3600),
        mmDeg = 360 * (mm * 60 + ss) / 3600,
        ssDeg = 6 * (hh * 3600 + mm * 60 + ss);
        //BUG: 23:59:59 -> 00:00:00 second hand transition will go wild!
    
    hourHand.style.transform = "rotate(" + hhDeg + "deg)";
    hourHand.style.webkitTransform = "rotate(" + hhDeg + "deg)";
    hourHand.style.MozTransform = "rotate(" + hhDeg + "deg)";
    hourHand.style.msTransform = "rotate(" + hhDeg + "deg)";
    
    minuteHand.style.transform = "rotate(" + mmDeg + "deg)";
    minuteHand.style.webkitTransform = "rotate(" + mmDeg + "deg)";
    minuteHand.style.MozTransform = "rotate(" + mmDeg + "deg)";
    minuteHand.style.msTransform = "rotate(" + mmDeg + "deg)";
    
    secondHand.style.transform = "rotate(" + ssDeg + "deg)";
    secondHand.style.webkitTransform = "rotate(" + ssDeg + "deg)";
    secondHand.style.MozTransform = "rotate(" + ssDeg + "deg)";
    secondHand.style.msTransform = "rotate(" + ssDeg + "deg)";

    setTimeout(update, 200);
}
        </script>
    </body>
</html>

这是效果

posted @ 2014-11-01 02:13  kilobtye  阅读(1337)  评论(0)  编辑  收藏  举报