机械表小案例之transform的应用

这个小案例主要是对transform的应用。

时钟的3个表针分别是3个png图片，通过setInterval来让图片转动。时，分，秒的转动角度分别是30，6，6度。

首先，通过new Date函数获取当前时间，通过date.getSeconds()，date.getMinutes(),date.getHours()获得秒，分，时，之所以按这个顺序，是因为下面的变量会有对上面的计算，如果按时，分，秒的顺序，则会报错。

其次，另外一个点，为保证平稳的从一个时间段调到另一个时间段，在设置时间时，如小时，需要将已经过去的分钟也转化为小时。var hour = date.getHours() + minute/60;其他的分，秒也要按此方法转化。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 100px auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }

        .clock div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/hour.png) no-repeat center center;
        }

        #m {
            background-image: url(images/minute.png);
        }

        #s {
            background-image: url(images/second.png);
        }
    </style>
</head>
<body>
<div class="clock">
    <div id="h"></div>
    <div id="m"></div>
    <div id="s"></div>
</div>

<script>
    var h = document.getElementById("h");
    var m = document.getElementById("m");
    var s = document.getElementById("s");


    function setTime(){
        //获取当前时间
        var date = new Date();

        var second = date.getSeconds()+date.getMilliseconds()/1000;
        s.style.transform = "rotate("+6*second+"deg)";

        var minute = date.getMinutes()+second/60;
        m.style.transform = "rotate("+6*minute+"deg)";

        var hour = date.getHours() + minute/60;
        h.style.transform = "rotate("+30*hour+"deg)";

    }

    setTime();

    setInterval(setTime, 15);
</script>
</body>
</html>

 

posted @ 2016-12-11 00:02  尋壹米陽光  阅读(284)  评论(0)  编辑  收藏  举报