transform实现的时钟效果
程序员文章站
2022-03-16 17:33:51
transform实现的时钟效果
又来一个时钟效果了,这个的实现不需要canvas,都是p、ul、li画出的,好玩有真实。
哈哈~
需要的js才能实现到走动这个效果,但js的...
transform实现的时钟效果
又来一个时钟效果了,这个的实现不需要canvas,都是p、ul、li画出的,好玩有真实。
哈哈~
需要的js才能实现到走动这个效果,但js的内容不多,也不难。
主要是一个css里transform的使用的思路,transform里有很多变幻属性,而普通的时钟在我心中就是个圆圆的东西,那么是不是可以旋转这个属性(rotate)实现了,它的刻度使用旋转且把旋转点设置在圆心,那不就可以绕着圆心转了吗,而时针它们的底部不是和圆心接触的吗,那么设置时针的底部为旋转点不就ok了,大概的说了说思路。
代码:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>transform</title> <style id="css"> #clock{ width: 200px; height: 200px; border: 2px solid #000; border-radius: 50%; margin: 100px auto 0; position: relative; } #clock ul{ width: 200px; height: 200px; position: relative; list-style: none; padding:0; margin: 0; } #clock ul li{ width: 2px; height: 10px; background: #000; transform-origin: center 100px; position: absolute; top: 0; left: 50%; } #clock ul li:nth-of-type(5n+1){ height: 20px; } #hour{ height: 40px; width: 4px; background: #00fefe; position: absolute; top: 60px; left: 99px; transform-origin:center bottom; } #min{ height: 60px; width: 3px; background: #001afe; position: absolute; top: 40px; left: 99px; transform-origin: center bottom; transform: rotate(15deg); } #sec{ height: 70px; width: 2px; background: #000; position: absolute; top: 30px; left: 99px; transform-origin:center bottom; } #dot{ width: 10px; height: 10px; position: absolute; left: 95px; top: 95px; background: #aaa; border-radius: 50%; } </style> </head> <body> <p id="clock"> <ul></ul> <p id="hour"></p> <p id="min"></p> <p id="sec"></p> <p id="dot"></p> </p> <script> var ocss=document.getelementbyid("css"); var oclock=document.getelementbyid("clock"); var oul=oclock.getelementsbytagname("ul")[0]; var ohour=document.getelementbyid("hour"); var omin=document.getelementbyid("min"); var osec=document.getelementbyid("sec"); var strli=""; var strcss=""; for(var i=0;i<60;i++){ strli+="<li></li>"; } oul.innerhtml=strli; for(var i=0;i<60;i++){ strcss+=‘#clock ul li:nth-of-type(‘+(i+1)+‘){transform:rotate(‘+i*6+‘deg);}‘; } ocss.innerhtml+=strcss; time(); setinterval(time,1000); function time(){ var date=new date(); var h=date.gethours(); var m=date.getminutes(); var s=date.getseconds(); ohour.style.transform="rotate("+(h+m/60)*30+"deg)"; omin.style.transform="rotate("+(m+s/60)*6+"deg)"; osec.style.transform="rotate("+s*6+"deg)"; } </script> </body> </html>
使用标签画图最主要的是定位,因为这样我们就可以把弄到形状的盒子放到你所想要的位置,内部css样式表是可以使用获取元素的方式获取的,这样就可以
使用innerhtml为其添加样式,且可以循环添加,还有因为刻度太多所以使用循环添加,这样省时省力,至于剩下的就是定时器了,给定好1秒的时间,每1
秒执行一次函数,这样它就是动起来了。