原生js實現(xiàn)隨機(jī)點(diǎn)名
本文實例為大家分享了js實現(xiàn)隨機(jī)點(diǎn)名的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>隨機(jī)點(diǎn)名</title></head><body> <h1 id='names'>點(diǎn)名</h1> <input type='button' value='開始' id=start_btn> <input type='button' value='結(jié)束' id=stop_btn disabled> <script>'../DOM/tools.js'</script> <script> let arrName = ['肖巍', '楊恩', '小菊花', '二狗', '小強(qiáng)', '小????', '彎彎姐', '陳鍇', '徐陽', '陳陽吉', '張勝江', '我', '波哥', '阿湯哥', '杰哥', '薛老板']; 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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. idea設(shè)置提示不區(qū)分大小寫的方法2. 一個用xslt樣式將xml解析為xhtml的類TransformBinder(兼容FF和IE7.0)3. JSP動態(tài)實現(xiàn)web網(wǎng)頁登陸和注冊功能4. 解決docker與vmware的沖突問題5. 用Asp與XML實現(xiàn)交互的一個實例源碼6. ASP.NET MVC解決上傳圖片臟數(shù)據(jù)的方法7. 詳解VUE中的插值( Interpolation)語法8. vue 動態(tài)給每個頁面添加title、關(guān)鍵詞和描述的方法9. vue任意關(guān)系組件通信與跨組件監(jiān)聽狀態(tài)vue-communication10. vue實現(xiàn)移動端返回頂部
