javascript實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)功能
更新時(shí)間：2020年12月30日 18:17:29 作者：彴兗
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
javascript實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)，供大家參考，具體內(nèi)容如下
首先創(chuàng)建一個(gè)數(shù)組用于存放抽獎(jiǎng)的參與者：
var arr=['張三','波波','kk','莉莉','張三豐','劉德華','周杰困','你那兒','zhere','好的'];
給開(kāi)始和結(jié)束按鈕div添加點(diǎn)擊事件：
//添加點(diǎn)擊開(kāi)始則開(kāi)始循環(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+'<br>';
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);
//移除開(kāi)始事件
document.getElementById("start").removeEventListener("click",va);
document.getElementById("show").innerText="沒(méi)有了";
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);
}
實(shí)現(xiàn)的最終效果圖如下：
當(dāng)點(diǎn)擊開(kāi)始時(shí)：
當(dāng)點(diǎn)擊暫停時(shí)：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 事件對(duì)內(nèi)存和性能的影響
本文主要介紹了JavaScript 事件對(duì)內(nèi)存和性能的影響。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要介紹了javascript函數(shù)中with,with函數(shù)方便用來(lái)引用某個(gè)對(duì)象中已有的屬性，但是不能用來(lái)給對(duì)象添加屬性，要給對(duì)象創(chuàng)建新的屬性，下面通過(guò)代碼給大家講解，需要的朋友可以參考下2018-10-10
本篇文章主要介紹了小程序視頻列表中視頻的播放與停止的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
單擊某一段文字，改文字變?yōu)榧t色，再次單擊之后，文字又變回黑色，示例如下,需要的朋友可以參考下2014-06-06
Object.assign方法用于對(duì)象的合并，將源對(duì)象（ source ）的所有可枚舉屬性，復(fù)制到目標(biāo)對(duì)象（ target ），下面這篇文章主要給大家介紹了關(guān)于ES6中新增的Object.assign()方法的相關(guān)資料，需要的朋友可以參考下。2017-09-09
XMLHttpRequest對(duì)象_Ajax異步請(qǐng)求重點(diǎn)(推薦)
下面小編就為大家?guī)?lái)一篇XMLHttpRequest對(duì)象_Ajax異步請(qǐng)求重點(diǎn)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
JavaScript支持的最大遞歸調(diào)用次數(shù)分析
這篇文章主要介紹了JavaScript支持的最大遞歸調(diào)用次數(shù)分析,也稱JavaScript支持的最大堆棧數(shù)量,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)彈幕小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Bootstrap Table服務(wù)器分頁(yè)與在線編輯應(yīng)用總結(jié)
這篇文章主要介紹了Bootstrap Table服務(wù)器分頁(yè)與在線編輯應(yīng)用總結(jié) 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
mock.js實(shí)現(xiàn)模擬生成假數(shù)據(jù)功能示例
這篇文章主要介紹了mock.js實(shí)現(xiàn)模擬生成假數(shù)據(jù)功能,結(jié)合實(shí)例形式分析了mock.js插件生成模擬數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01