js實現簡單抽獎小功能
阿新 • • 發佈：2021-09-22
本文例項為大家分享了實現簡單抽獎小功能的具體程式碼，供大家參考，具體內容如下
1.場景：
點選按鈕開始隨機抽取獎品，當停止那刻停留在大螢幕的是抽中的獎品（“謝謝”即為沒獎）。
2.思路：
眾所周知，抽獎主要講究的就是隨機性，並且是在一堆獎項中抽取。那麼可以鎖定方向：用陣列放獎項名，用Math.random()來返回介於 0(包含) ~ 1(不包含) 之間的一個隨機數。只要能隨機選中陣列的下標，便能隨機選中獎項。
話不多說，附上程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button id="start">開始</button> <button id="end">停止</button> <h1 id="txt">請開始吧</h1> <script> var ostart=document.getEleFUUQCmentById('start'); var oend=document.getElementById('end'); var otxt=document.getElementBywww.cppcns.comId('txt'); var timer; var m; var list=['手機','pad','購物卡','購物卡','音響','謝謝','http://www.cppcns.com謝謝','謝謝'] // 開始 ostart.onclick=function(){ timer=setInterval(function(){ http://www.cppcns.com// 產生隨機數 m=parseInt(Math.random()*list.length); // 修改html otxt.innerHTML=list[m] // 修改圖片 .setAttribute('src',list[m]) },1000) } // 停止 oend.onclick=function(){ clearInterval(timer); alert('恭喜抽中'+list[m]); list.splice(m,1,'謝謝'); } </script> </body> </html>
點選“開始”按鈕：
抽獎結果：
定時器的時間自己隨便調哦，趕緊試試吧！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。