网页特效之时钟

思路：首先使用定位功能把时钟、时针、分针、秒针聚合，然后使用日期函数得到当前时间的时分秒和毫秒，然后使用css3属性transform和旋转函数rotate()改变角度，达到使针转动的目的。

关键知识：position定位，日期函数Date()获得当前时分秒的使用，transform属性
具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            margin: 40px auto; 
            position: relative;
            background: url(images/clock.jpg) no-repeat;
        }
        .box div {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .h {
            background: url(images/hour.png) no-repeat center center;/*居中显示不重铺*/
        }
        .m {
            background: url(images/minute.png) no-repeat center center;
        }
        .s {
            background: url(images/second.png) no-repeat center center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="h" id="hour"></div>
        <div class="m" id="min"></div>
        <div class="s" id="second"></div>
    </div>
</body>
<script type="text/javascript">
    var hour = document.getElementById('hour');
    var min = document.getElementById('min');
    var second = document.getElementById('second');
    //设置定时器
    setInterval(clock,1000);
    //如果改为setInterval(clock,10)可使秒针以滑动形式转动
    function clock(){
        var date = new Date();
        var ms = date.getMilliseconds();//得到当前毫秒数
        var s = date.getSeconds()+ms/1000;//得到当前秒，可能是小数
        var m = date.getMinutes()+s/60;//得到当前分
        var h = date.getHours()%12+m/60;//得到当前小时,注意时钟表盘是12进制
        
        // console.log(h,m,s,ms);
        
        //使用css3属性transform旋转角度
        second.style.WebkitTransform = 'rotate('+s*6+'deg)';//秒针一圈走60次，每秒6度
        second.style.MozTransfor = 'rotate('+s*6+'deg)';
        min.style.WebkitTransform = 'rotate('+m*6+'deg)';//分钟一圈走60次，每分钟6度
        hour.style.WebkitTransform = 'rotate('+h*30+'deg)';//时针一圈走12次，每小时30度
    }

</script>
</html>

具体效果可见：时钟效果

猜你喜欢