設定一個簡單的時鐘
阿新 • • 發佈：2018-11-06
今天我麼們來用用css3中的2D旋轉來做一個時鐘
首先我們來看看學要用到的知識點
1.首先要用到css3中的transform方法，設定其中的屬性rotate
我們可以在style中設定，也可以在js中設定 id.style.transform=“rotate(30deg)”;
2.其次還要用到js中的計時器，我們回想一下js中的計時器有兩種方式
(1) setInterval（a，b）方法 a代表要執行的方法 b代表的是計時的時間，每間隔多少毫秒執行a方法，一直執行下去，執行多次
(2) setTimeout（a,b）方法 a代表要執行的方法 b代表的是多長時間後執行，只執行一次
現在我們來看一下程式碼實現：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> var i = 0; var a; window.onload=function(){ a = document.getElementById("a"); setInterval("changeDiv()",1000); } function changeDiv(){ i+=6; a.style.transform="rotate("+i+"deg)"; } </script> <body> <img id="a" src="img/a.png">//插入指標圖片 </body> </html>
上面的程式碼基本上就是實現了一個簡單的時鐘功能
