机械表小案例之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>