這篇文章將為大家詳細(xì)講解有關(guān)利用javascript怎么編寫一個(gè)隨機(jī)抽獎(jiǎng)功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)企業(yè)建站,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn)，專注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁(yè)設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營(yíng)經(jīng)驗(yàn)，設(shè)計(jì)師為客戶打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢和貼心的售后服務(wù)。對(duì)于網(wǎng)站設(shè)計(jì)、做網(wǎng)站中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶行業(yè)的需求，以靈動(dòng)的思維在網(wǎng)頁(yè)中充分展現(xiàn)，通過(guò)對(duì)客戶行業(yè)精準(zhǔn)市場(chǎng)調(diào)研，為客戶提供的解決方案。

首先創(chuàng)建一個(gè)數(shù)組用于存放抽獎(jiǎng)的參與者：

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

給開始和結(jié)束按鈕div添加點(diǎn)擊事件：

//添加點(diǎn)擊開始則開始循環(huán)播放
document.getElementById("start").addEventListener("click",va);
//點(diǎn)擊停止則停止播放并顯示恭喜中獎(jiǎng)
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+'
';
  get.innerText=get.innerText+`${count}. `+name;
})

用setTimeout實(shí)現(xiàn)循環(huán)事件，每隔100毫秒就執(zhí)行一次循環(huán)，隨機(jī)得到存放參與者的數(shù)組的長(zhǎng)度之間的隨機(jī)數(shù)，不斷修改innerText實(shí)現(xiàn)用戶滾動(dòng)效果：

//循環(huán)事件
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);
}

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

關(guān)于利用javascript怎么編寫一個(gè)隨機(jī)抽獎(jiǎng)功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁(yè)標(biāo)題：利用javascript怎么編寫一個(gè)隨機(jī)抽獎(jiǎng)功能-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://weahome.cn/article/igjjs.html