快捷導(dǎo)航

javascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡(jiǎn)單實(shí)例

更新時(shí)間：2016年06月07日 15:47:44 投稿：jingxian

下面小編就為大家?guī)?lái)一篇javascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

昨天開(kāi)年會(huì)的時(shí)候看到一個(gè)段子說(shuō)唯品會(huì)年會(huì)抽獎(jiǎng)，結(jié)果大獎(jiǎng)都被寫(xiě)抽獎(jiǎng)程序的部門(mén)得了，CTO現(xiàn)場(chǎng)review代碼。

簡(jiǎn)單想了一下抽獎(jiǎng)程序的實(shí)現(xiàn)，花了十幾分鐘寫(xiě)了一下，主要用到的知識(shí)有數(shù)組添加刪除，以及ES5 數(shù)組新增的indexOf,filter方法，

為了刷新頁(yè)面后仍能保存已中獎(jiǎng)記錄，用了localStorage存盤(pán)。

剛開(kāi)始是用隨機(jī)數(shù)直接取編號(hào)，發(fā)現(xiàn)要剔除已中獎(jiǎng)的人很麻煩，如果重復(fù)要遞歸調(diào)用，如果中獎(jiǎng)的人太多到最后隨機(jī)數(shù)取到已中獎(jiǎng)的人概率太大，所以換用兩個(gè)數(shù)組實(shí)現(xiàn)，一個(gè)記錄已中獎(jiǎng)的號(hào)碼，一個(gè)記錄未中獎(jiǎng)的號(hào)碼，已中獎(jiǎng)的從另一個(gè)數(shù)組剔除就行，就不存在遞歸調(diào)用的情況。

具體實(shí)現(xiàn)如下：

var start=1,end=20,luckyList=[],futureList=[];//luckyList表示已獲獎(jiǎng)的人，futureList表示尚未抽中的人，start,end表示獎(jiǎng)券起止編號(hào)

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

//抽獎(jiǎng)函數(shù)，每運(yùn)行一次，產(chǎn)生一個(gè)幸運(yùn)號(hào)碼
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ǎng)結(jié)果：",result); 

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

}

raffle();

以上這篇javascript實(shí)現(xiàn)抽獎(jiǎng)程序的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: