JS实现简单时钟效果

我会带着你远行 2022-01-25 15:39 354阅读 0赞

老师上课需要我们做一个时钟的小作业 ，我把它放在上面记录一下啦  
表盘和时针我都是用的背景图的形式，然后绝对定位，通过调整left和top确定时针、分针、秒针的位置，transform-origin设置它们的旋转中心  
具体效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyNzE4Mw_size_16_color_FFFFFF_t_70]  
HTML代码：

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyNzE4Mw_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][20190530135020509.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyNzE4Mw_size_16_color_FFFFFF_t_70]: /images/20220125/24bab017bb52451e8382c82c7edee264.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyNzE4Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019053013492195.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyNzE4Mw==,size_16,color_FFFFFF,t_70
[20190530135020509.png]: /images/20220125/13419746a7e74c74b6aab5961d361d8e.png