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