您的位置:首頁/技術文章
文章詳情頁

javascript實現隨機抽獎功能

瀏覽:2日期:2023-06-11 16:09:41

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);}

實現的最終效果圖如下:

當點擊開始時:

javascript實現隨機抽獎功能

當點擊暫停時:

javascript實現隨機抽獎功能

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
国产综合久久一区二区三区