javascript實(shí)現(xiàn)抽獎程序的簡單實(shí)例
更新時間：2016年06月07日 15:47:44 投稿：jingxian
下面小編就為大家?guī)硪黄猨avascript實(shí)現(xiàn)抽獎程序的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
昨天開年會的時候看到一個段子說唯品會年會抽獎，結(jié)果大獎都被寫抽獎程序的部門得了，CTO現(xiàn)場review代碼。
簡單想了一下抽獎程序的實(shí)現(xiàn)，花了十幾分鐘寫了一下，主要用到的知識有數(shù)組添加刪除，以及ES5 數(shù)組新增的indexOf,filter方法，
為了刷新頁面后仍能保存已中獎記錄，用了localStorage存盤。
剛開始是用隨機(jī)數(shù)直接取編號，發(fā)現(xiàn)要剔除已中獎的人很麻煩，如果重復(fù)要遞歸調(diào)用，如果中獎的人太多到最后隨機(jī)數(shù)取到已中獎的人概率太大，所以換用兩個數(shù)組實(shí)現(xiàn)，一個記錄已中獎的號碼，一個記錄未中獎的號碼，已中獎的從另一個數(shù)組剔除就行，就不存在遞歸調(diào)用的情況。
具體實(shí)現(xiàn)如下：
var start=1,end=20,luckyList=[],futureList=[];//luckyList表示已獲獎的人，futureList表示尚未抽中的人，start,end表示獎券起止編號
//先初始化一下所有人員編號的數(shù)組
for(var i=start;i<=end;i++){
futureList.push(i);
}
//如果刷新了頁面，從localStoreage中恢復(fù)
if(localStorage.getItem("lucky")){
luckyList=localStorage.getItem("lucky").split(",");
futureList=futureList.filter(function(item){
return luckyList.indexOf(item)==-1;
})
console.log(futureList)
}
//抽獎函數(shù)，每運(yùn)行一次，產(chǎn)生一個幸運(yùn)號碼
function raffle(){
var num= Math.random()*futureList.length;
num=Math.floor(num);
var idx=futureList.indexOf(num);
var result= futureList.splice(idx,1)[0].toString();
luckyList.push(result);
localStorage.setItem("lucky",luckyList);
console.log("抽獎結(jié)果：",result);
}
//清除localstorge，如果要復(fù)位程序執(zhí)行此函數(shù)
function clear(){
localStorage.setItem("lucky","");
}
raffle();
以上這篇javascript實(shí)現(xiàn)抽獎程序的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于js中Generator函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
V8引擎是一款由Google開發(fā)的JavaScript引擎，V8引擎采用了眾多的優(yōu)化措施，使得其在性能上得到了極大的提升，能夠高效地執(zhí)行JavaScript代碼，本文將和大家一起探討一下V8引擎底層原理，探究其優(yōu)異性能之謎2023-06-06
JavaScript 預(yù)解析的4種實(shí)現(xiàn)方法解析
這篇文章主要介紹了JavaScript 預(yù)解析的4種實(shí)現(xiàn)方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
js實(shí)現(xiàn)的點(diǎn)擊超鏈顯示隱藏層
js實(shí)現(xiàn)的點(diǎn)擊超鏈顯示隱藏層...2007-05-05
js 小貼士一星期合集，學(xué)習(xí)js的朋友可以參考下。2010-04-04
純JS實(shí)現(xiàn)的讀取excel文件內(nèi)容功能示例【支持所有瀏覽器】
這篇文章主要介紹了純JS實(shí)現(xiàn)的讀取excel文件內(nèi)容功能,結(jié)合實(shí)例形式分析了基于js相關(guān)插件進(jìn)行Excel文件讀取的相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
簡單聊聊JavaScript的事件循環(huán)機(jī)制
前端開發(fā)的童鞋應(yīng)該都知道,JavaScript是一門單線程的腳本語言,這就意味著JavaScript 代碼在執(zhí)行的時候,只有一個主線程來執(zhí)行所有的任務(wù),同一個時間只能做同一件事情,這篇文章主要給大家介紹了關(guān)于JavaScript事件循環(huán)機(jī)制的相關(guān)資料,需要的朋友可以參考下2022-03-03
Javascript中的return作用及javascript return關(guān)鍵字用法詳解
本文給大家介紹Javascript中的return作用及javascript return關(guān)鍵字用法詳解，對于大家學(xué)習(xí)javascript中的return知識有所幫助，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
這篇文章主要介紹了序列化模塊json代碼實(shí)例詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03
Code：loadScript( )加載js的功能函數(shù)
Code：loadScript( )加載js的功能函數(shù)...2007-02-02