又來一個時鐘效果了，這個的實現(xiàn)不需要canvas，都是div、ul、li畫出的，好玩有真實。
哈哈~
需要的js才能實現(xiàn)到走動這個效果，但js的內(nèi)容不多，也不難。
主要是一個css里transform的使用的思路，transform里有很多變幻屬性，而普通的時鐘
在我心中就是個圓圓的東西，那么是不是可以旋轉(zhuǎn)這個屬性（rotate）實現(xiàn)了，它的刻度
使用旋轉(zhuǎn)且把旋轉(zhuǎn)點設(shè)置在圓心，那不就可以繞著圓心轉(zhuǎn)了嗎，而時針它們的底部不是和
圓心接觸的嗎，那么設(shè)置時針的底部為旋轉(zhuǎn)點不就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> <div id="clock"> <ul></ul> <div id="hour"></div> <div id="min"></div> <div id="sec"></div> <div id="dot"></div> </div> <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>使用標簽畫圖最主要的是定位，因為這樣我們就可以把弄到形狀的盒子放到你所想要的位置，內(nèi)部css樣式表是可以使用獲取元素的方式獲取的，這樣就可以 使用innerHTML為其添加樣式，且可以循環(huán)添加，還有因為刻度太多所以使用循環(huán)添加，這樣省時省力，至于剩下的就是定時器了，給定好1秒的時間，每1 秒執(zhí)行一次函數(shù)，這樣它就是動起來了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
