JS实现简单时钟效果-蒲公英云

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)";
    }