JS实现简单时钟效果 我会带着你远行 2022-01-25 15:39 278阅读 0赞 老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦 表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整left和top确定时针、分针、秒针的位置,transform-origin设置它们的旋转中心 具体效果: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTEyNzE4Mw_size_16_color_FFFFFF_t_70] 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)"; } ![在这里插入图片描述][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
还没有评论,来说两句吧...