利用隨機數與定時器做一個簡單的偽隨機抓鬮遊戲
阿新 • • 發佈：2018-12-11
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box1{ width: 700px; height: 600px; background-color: orange; margin: auto; position: relative; } .box2{ width: 200px; height: 200px; background: wheat; position: absolute; left: 50px; top: 150px; font: 30px arial; color: red; line-height: 200px; text-align: center; } .box3{ width: 200px; height: 200px; background: wheat; position: absolute; left: 450px; top: 150px; font: 30px arial; color: red; line-height: 200px; text-align: center; } </style> </head> <body> <div class="box1"> <div class="box2" id="sb"></div> <input type="button" style="margin: 500px 210px;" value="開始" onclick="boxone()" /> <div class="box3" id="sth"></div> <input type="button" value="結束" onclick="boxtwo()" /> </div> <script type="text/javascript"> var sname=["小黃","小紅","小藍","小綠","小青","小紫","小橙"]; var sthing=["吃瓜","賣萌","嗑瓜子","搬凳子","看戲","賣汽水"]; var timer; function boxone(){ clearTimeout(timer); document.getElementById("sb").innerHTML= sname[Math.floor(Math.random()*sname.length)]; document.getElementById("sth").innerHTML= sthing[Math.floor(Math.random()*sthing.length)]; timer=setTimeout(boxone,200); } function boxtwo(){ clearTimeout(timer); } </script> </body> </html>
要求：點選開始後，姓名與事件每200ms變換一次，當點選結束後，停止變換，隨機顯示一個姓名與事件
————
定義兩個陣列，一個裝姓名，一個裝事件，順便定義一個定時器名
var sname=["小黃","小紅","小藍","小綠","小青","小紫","小橙"];
var sthing=["吃瓜","賣萌","嗑瓜子","搬凳子","看戲","賣汽水"];
var timer;
//document.getElementById("sb").innerHTML 獲取到的ID名為sb的元素裡面的內容 //Math.floor(Math.random()*sname.length) 隨機生成一個0到sname.length（兩個邊界均不包含）之間的數並向下取整，以此來隨機生成一個數組sname的下標。 //此段程式碼意為在陣列sname中隨機找一個元素將其賦給ID名為sb的元素。 document.getElementById("sb").innerHTML= sname[Math.floor(Math.random()*sname.length)]; //事件的處理方法一樣
————
利用定時器每200ms呼叫一次函式，為了使滾動速度不會越來越快，每使用定時器呼叫一次函式，都需要清除上一個定時器。
function boxone(){ clearTimeout(timer); document.getElementById("sb").innerHTML= sname[Math.floor(Math.random()*sname.length)]; document.getElementById("sth").innerHTML= sthing[Math.floor(Math.random()*sthing.length)]; timer=setTimeout(boxone,200); }
————
這裡結束按鈕的方法，清除定時器就行了
function boxtwo(){
clearTimeout(timer);
}