寫一個一個抽獎大轉盤
阿新 • • 發佈：2018-11-06
現在我們再來寫一個簡單的大轉盤
我們用到的東西和之前寫的時鐘是一樣的，不過最多是程式碼複雜點
我們再來回顧一下之前時鐘的用到的知識點
1.首先是CSS3中的2D旋轉技術 用到的 transform（）方法 設定其中的rotate屬性
2.其次用到了js中的計時技術一個是setInterval（）方法 一個是 setTimeout（）方法
setInterval（A,B） A代表的是要重複執行的方法 B代表的是要每隔多少毫秒執行一次
setTimeout（A.B） A代表的是要重複執行的方法 B代表多少毫秒後執行，只執行一次
3.刪除計時器的方法clearInterval(a) clearTimeout(a) a要刪除的計時器的變數名
下面就是程式碼實現了
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> #a{ position: absolute; top: 100px; left: 300px; } </style> <script> var i = 0; var a; var id1,id2,id3,id3; window.onload=function(){ a = document.getElementById("a"); } function changeDiv(){ i+=6; a.style.transform="rotate("+i+"deg)"; } function choujiang(){ //設定多個計時器 id1=setInterval("changeDiv()",20); id2=setInterval("changeDiv()",20); id3=setInterval("changeDiv()",20); id4=setInterval("changeDiv()",20); //逐秒刪除計時器 setTimeout(function(){ clearInterval(id1);//刪除計時器的方法clearInterval() clearTimeout() },2000); setTimeout(function(){ clearInterval(id2); },3000); setTimeout(function(){ clearInterval(id3); },4000); setTimeout(function(){ clearInterval(id4); },5000); } </script> <body> <button onclick="choujiang()" >抽獎</button> <img id="a" src="img/jt.png"> </body> </html>