JS实现简单时钟效果

老师上课需要我们做一个时钟的小作业 ，我把它放在上面记录一下啦

表盘和时针我都是用的背景图的形式，然后绝对定位，通过调整left和top确定时针、分针、秒针的位置，transform-origin设置它们的旋转中心

具体效果：



HTML代码：

<div class="box" id="box">

    <span></span>

    <span></span>

    <span></span>

</div>

css代码：

  div.box{

        width: 620px;

        height: 620px;

        background: url("images/time.jpg") no-repeat;

        background-size: 100%;

        margin: 20px auto;

        position: relative;

    }

    div.box span{

        position: absolute;

    }

    div.box span:nth-child(3){

        width: 58px;

        height: 208px;

        background: url("images/time_1.png") no-repeat -8px -44px;

        left: calc(50% - 29px);

        top: 130px;

        transform-origin: center 174px;

    }

    div.box span:nth-child(2){

        width: 32px;

        height: 228px;

        background: url("images/time_1.png") no-repeat -72px -10px;

        left: calc(50% - 16px);

        top: 97px;

        transform-origin: center 205px;

    }

    div.box span:nth-child(1){

        width: 14px;

        height: 238px;

        background: url("images/time_1.png") no-repeat -131px -0px;

        left: calc(50% - 8px);

        top: 106px;

        transform-origin: center 198px;

    }

JS代码（设置一个定时器，每1秒执行一次，获取当前的时、分、秒，控制时针、分针、秒针的度数）：

    var spans=document.querySelectorAll('div.box span');

    cur();

    setInterval(cur, 1000);

    function cur() {

        var now = new Date();

        var h = now.getHours();

        var m = now.getMinutes();

        var s = now.getSeconds();

        spans[2].style.transform="rotate("+h*30+"deg)";

        spans[1].style.transform="rotate("+m*6+"deg)";

        spans[0].style.transform="rotate("+s*6+"deg)";

    }