DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript實現抽獎程序的簡單實例
javascript實現抽獎程序的簡單實例
編輯:關於JavaScript     

昨天開年會的時候看到一個段子說唯品會年會抽獎,結果大獎都被寫抽獎程序的部門得了,CTO現場review代碼。

簡單想了一下抽獎程序的實現,花了十幾分鐘寫了一下,主要用到的知識有數組添加刪除,以及ES5 數組新增的indexOf,filter方法,

為了刷新頁面後仍能保存已中獎記錄,用了localStorage存盤。

剛開始是用隨機數直接取編號,發現要剔除已中獎的人很麻煩,如果重復要遞歸調用,如果中獎的人太多到最後隨機數取到已中獎的人概率太大,所以換用兩個數組實現,一個記錄已中獎的號碼,一個記錄未中獎的號碼,已中獎的從另一個數組剔除就行,就不存在遞歸調用的情況。

具體實現如下:

var start=1,end=20,luckyList=[],futureList=[];//luckyList表示已獲獎的人,futureList表示尚未抽中的人,start,end表示獎券起止編號

//先初始化一下所有人員編號的數組
for(var i=start;i<=end;i++){
futureList.push(i);
}
//如果刷新了頁面,從localStoreage中恢復
if(localStorage.getItem("lucky")){
luckyList=localStorage.getItem("lucky").split(",");
futureList=futureList.filter(function(item){
return luckyList.indexOf(item)==-1;
})
console.log(futureList)
}

//抽獎函數,每運行一次,產生一個幸運號碼
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("抽獎結果:",result); 

} 
//清除localstorge,如果要復位程序執行此函數
function clear(){
localStorage.setItem("lucky","");

}

raffle();

以上這篇javascript實現抽獎程序的簡單實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved