javascript實現隨機抽獎功能

Posted on by

javascript實現隨機抽獎，供大傢參考，具體內容如下

首先創建一個數組用於存放抽獎的參與者：

var arr=['張三','波波','kk','莉莉','張三豐','劉德華','周傑困','你那兒','zhere','好的'];

給開始和結束按鈕div添加點擊事件：

//添加點擊開始則開始循環播放
document.getElementById("start").addEventListener("click",va);
//點擊停止則停止播放並顯示恭喜中獎
document.getElementById("end").addEventListener("click",function (){
  count++;
  clearTimeout(i);
  var name=arr[thisone];
  arr.splice(thisone,1);
  var get=document.getElementById("get");
  get.innerHTML=get.innerHTML+'<br>';
  get.innerText=get.innerText+`${count}. `+name;
})

用setTimeout實現循環事件，每隔100毫秒就執行一次循環，隨機得到存放參與者的數組的長度之間的隨機數，不斷修改innerText實現用戶滾動效果：

//循環事件
function va(){
  let num=arr.length;
  console.log(num);
  if(num===0){
    clearTimeout(i);
    //移除開始事件
    document.getElementById("start").removeEventListener("click",va);
    document.getElementById("show").innerText="沒有瞭";
    return;
  }
  setTimeout("show()",100);
}

//獲得當前名字下標
function getindex() {
  return parseInt(Math.random()*arr.length);
}
//循環播放列表
function show(){
  thisone=getindex();
  document.getElementById("show").innerText=arr[thisone];
  i=setTimeout("show()",100);
}

實現的最終效果圖如下：

當點擊開始時：

當點擊暫停時：

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：