实现时钟效果

效果图：

 

先搭架子：

        * {
            margin: 0;
            padding: 0;
        }
        
        .clock {
            width: 300px;
            height: 600px;
            margin: 0 auto;
            background: url("images/clock.png");
            position: relative;
        }
        
        .clock>.box {
            width: 120px;
            height: 120px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 220px;
        }
        
        .hour,
        .minute,
        .second {
            background: url("images/hour.png");
            width: 6px;
            height: 120px;
            position: absolute;
            left: 50%;
            transform: translateX((-50%));
        }
        
        .minute {
            background: url("images/minute.png");
        }
        
        .second {
            background: url("images/second.png");
        }

    <div class="clock">
        <div class="box">
            <div class="hour"></div>
            <div class="minute"></div>
            <div class="second"></div>
        </div>
    </div>

 

 

 

 

 

编写逻辑代码：

获取需要操作的元素

获取当前的时间

根据当前时间设置时分秒针时间旋转

每隔一秒更新一次，将获取到的旋转度数以及获取当前时间的代码放入setInterval()里即可

为了一进来就可以看到效果，我们可以将获取到的旋转度数以及获取当前时间的代码进行封装处理 ，然后分别在setInterval()里和外进行调用