原生js實現隨機點名
阿新 • • 發佈:2020-07-07
本文例項為大家分享了js實現隨機點名的具體程式碼,供大家參考,具體內容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>隨機點名</title> </head> <body> <h1 class="name" id="names">點名</h1> <input type="button" value="開始" id=start_btn> <input type="button" value="結束" id=stop_btn disabled> <script>"../DOM/tools.js"</script> <script> let arrName = ["肖巍","楊恩","小菊花","二狗","小強","小湉湉","彎彎姐","陳鍇","徐陽","陳陽吉","張勝江","我","波哥","阿湯哥","傑哥","薛老闆"]; let names = document.querySelector("h1"); let start_btn = document.querySelector("#start_btn"); let stop_btn = document.querySelector("#stop_btn"); let i,timer; function creatRandom(min,max) { if (!max) { [max,min] = [min,0]; } let number = parseInt(Math.random() * (max - min + 1) + min); return number; } start_btn.onclick = function () { stop_btn.disabled ? stop_btn.disabled = false : stop_btn.disabled = true; start_btn.disabled ? start_btn.disabled = false : start_btn.disabled = true; timer = setInterval(() => { i = creatRandom(0,arrName.length - 1); names.innerHTML = arrName[i]; },100); }; stop_btn.onclick = function () { stop_btn.disabled ? stop_btn.disabled = false : stop_btn.disabled = true; start_btn.disabled ? start_btn.disabled = false : start_btn.disabled = true; console.log(arrName [i]); clearInterval(timer); arrName.splice(i,1); if(!arrName.length){ start_btn.disabled=true; stop_btn.disabled=true; names.innerHTML = "抽獎完畢"; } }; </script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。