九格宮抽獎(jiǎng)相信大家都玩過艰匙，今天就用 JavaScript 寫個(gè)九宮格抽獎(jiǎng)玩玩蹭越。讓中獎(jiǎng)不再是夢(mèng)！
1.預(yù)覽效果
image
效果圖為屏幕錄制軟件生成弛槐，以至于出現(xiàn)滾動(dòng)不連貫懊亡。實(shí)際運(yùn)行中不會(huì)出現(xiàn)不連貫的滾動(dòng)效果
2.完整代碼
代碼可直接復(fù)制運(yùn)行查看效果（圖片記得更換）
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 實(shí)現(xiàn)九宮格抽獎(jiǎng)</title>
<style>
body{
background-color: #2c9afc;
}
#container {
width: 330px;
height: 340px;
margin: 10% auto;
border: 7px solid #99d4ff;
border-radius: 10px;
padding: 2%;
}
#list {
width: 330px;
height: 340px;
list-style: none;
margin: 0;
padding: 0;
}
#list li,
#list span {
width: 100px;
height: 100px;
float: left;
text-align: center;
line-height: 100px;
position: relative;
background-color: #384f9a;
margin: 1.4%;
border-radius: 5px;
}
#list li img{
display: block;
width: 100%;
height: 100%;
}
#list li .mask{
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
background: url(images/mask.png) no-repeat;
background-size: cover;
display: none;
}
#list span:hover {
cursor: pointer;
color: orange;
font-size: 18px;
}
#list .active .mask{
display: block;
}
#message {
line-height: 32px;
color: #9a9a9a;
text-align: center;
position:absolute;
left: 50%;
top: 50px;
width: 300px;
height: 50px;
margin-left: -150px;
display: none;
background: #000;
color: #fff;
}
</style>
</head>
<body>
<h3 style="text-align:center;margin-top: 10%;color:white">JavaScript 實(shí)現(xiàn)九宮格抽獎(jiǎng)</h3>
<div id="container">
<ul id="list">
<!-- img標(biāo)簽放獎(jiǎng)品圖片 -->
<!-- mask類為抽獎(jiǎng)滾動(dòng)起來的標(biāo)記 -->
<li><img src="images/1.png"/><div class="mask"></div></li>
<li><img src="images/2.png"/><div class="mask"></div></li>
<li><img src="images/3.png"/><div class="mask"></div></li>
<li><img src="images/4.png"/><div class="mask"></div></li>
<span id="startbutton" onclick="startlottery()" style="background-color:#ff3a59;color:white;font-size: 20px;">開始抽獎(jiǎng)</span>
<li><img src="images/5.png"/><div class="mask"></div></li>
<li><img src="images/6.png"/><div class="mask"></div></li>
<li><img src="images/7.png"/><div class="mask"></div></li>
<li><img src="images/8.png"/><div class="mask"></div></li>
</ul>
<div id="message"></div><!-- 獲獎(jiǎng)信息展示 -->
</div>
</body>
<script type="text/javascript">
var container = document.getElementById('container'),
li = container.getElementsByTagName('li'),
span = document.getElementById('startbutton'),
message = document.getElementById('message'),
timer = null;
bReady = true;//定義一個(gè)抽獎(jiǎng)開關(guān)
var prize = [0,1,2,4,7,6,5,3];//獎(jiǎng)品li標(biāo)簽滾動(dòng)的順序
var num = 0;//num用來存放得到的隨機(jī)函數(shù)，也就是抽中的獎(jiǎng)品
//開始抽獎(jiǎng)
function startlottery(){
if(bReady) {//當(dāng)抽獎(jiǎng)開關(guān)為true的時(shí)候乎串，可點(diǎn)擊抽獎(jiǎng)
message.style.display="none";//將獲獎(jiǎng)信息div隱藏（以防止上次抽獎(jiǎng)信息還顯示）
span.style.background="#ada7a8";
bReady = false;//抽獎(jiǎng)開關(guān)設(shè)為false 處于抽獎(jiǎng)中 即不能點(diǎn)擊抽獎(jiǎng)
num = getrandomnum(1,9)//得到一個(gè)隨機(jī)數(shù)（即獎(jiǎng)品）
// console.log(num)
startinit(num);//執(zhí)行抽獎(jiǎng)初始化
}
}
//抽中的獎(jiǎng)品 返回1-9的整數(shù)店枣，包含1，不包含9
function getrandomnum(n, m) {
return parseInt((m - n) * Math.random() + n);
}
//抽獎(jiǎng)初始化
function startinit(num) {
var i = 0; //定義一個(gè)i 用來計(jì)算抽獎(jiǎng)跑動(dòng)的總次數(shù)
var t =200; //抽獎(jiǎng)跑動(dòng)的速度 初始為200毫秒
var rounds = 5; //抽獎(jiǎng)轉(zhuǎn)動(dòng)的圈數(shù)
var rNum = rounds*8; //標(biāo)記跑動(dòng)的次數(shù)（這是一個(gè)條件判斷分界線）
timer = setTimeout(startscroll, t);//每t毫秒執(zhí)行startscroll函數(shù)
//抽獎(jiǎng)滾動(dòng)的函數(shù)
function startscroll() {
//每次滾動(dòng)抽獎(jiǎng)將所有l(wèi)i的class都設(shè)為空
for(var j = 0; j < li.length; j++) {
li[j].className = '';
}
var prizenum = prize[i%li.length]; //通過i余8得到此刻在prize數(shù)組中的數(shù)字叹誉，該數(shù)字就是mask標(biāo)記出現(xiàn)的位置
li[prizenum].className = "active";
i++;
if(i<rNum-8){ //當(dāng)i小于轉(zhuǎn)(rNum-8次)的數(shù)量鸯两，t不變還是200毫秒
timer = setTimeout(startscroll, t);//繼續(xù)執(zhí)行抽獎(jiǎng)滾動(dòng)
}else if(i>= rNum-8 && i< rNum+num){
//t時(shí)間變長(zhǎng)，此時(shí)計(jì)時(shí)器運(yùn)行速度降低长豁，同時(shí)標(biāo)簽刷新速度也降低
t+=(i-rNum+8)*5;
timer = setTimeout(startscroll, t);//繼續(xù)執(zhí)行抽獎(jiǎng)滾動(dòng)
}
if( i >= rNum+num){//當(dāng)i大于轉(zhuǎn)rNum加隨機(jī)數(shù)字num次計(jì)時(shí)器結(jié)束钧唐，出現(xiàn)提示框提示中獎(jiǎng)信息
if (num==1) {
message.innerHTML="恭喜你中了耳機(jī)";
}else if(num==2){
message.innerHTML="恭喜你中了iPad";
}else if(num==3){
message.innerHTML="感謝參與";
}else if(num==4){
message.innerHTML="恭喜你中了洋娃娃";
}else if(num==5){
message.innerHTML="恭喜你中了紅色鞋子";
}else if(num==6){
message.innerHTML="恭喜你中了白色手機(jī)";
}else if(num==7){
message.innerHTML="恭喜你中了黑色手機(jī)";
}else if(num==8){
message.innerHTML="恭喜你中了藍(lán)色鞋子";
}
var timer2 = null;
timer2 = setTimeout(function(){
message.style.display="block";//獎(jiǎng)品展示的信息為顯示狀態(tài)
span.style.background="#ff3a59";
clearTimeout(timer2);
},1000);
bReady = true;//當(dāng)計(jì)時(shí)器結(jié)束后讓span標(biāo)簽變?yōu)槌楠?jiǎng)狀態(tài)
clearTimeout(timer);
}
}
}
</script>
</html>
3.代碼分析
1. prize
var prize = [0,1,2,4,7,6,5,3];//獎(jiǎng)品li標(biāo)簽滾動(dòng)的順序
數(shù)組prize中的數(shù)字就是li標(biāo)簽對(duì)應(yīng)的索引值，由于是九宮格抽獎(jiǎng)匠襟，因此抽獎(jiǎng)滾動(dòng)的順序并不是按li標(biāo)簽的索引順序钝侠，以下是li標(biāo)簽實(shí)際滾動(dòng)的順序圖分析：
image
2. getrandomnum(1,9)
//抽中的獎(jiǎng)品 返回1-9的整數(shù)，包含1宅此，不包含9
function getrandomnum(n, m) {
return parseInt((m - n) * Math.random() + n);
}
因?yàn)橹挥?個(gè)獎(jiǎng)品，所以得到的隨機(jī)整數(shù)不包含9
3. 變量 i爬范、rounds父腕、rNum
var i = 0; //定義一個(gè)i 用來計(jì)算抽獎(jiǎng)跑動(dòng)的總次數(shù)
var rounds = 5; //抽獎(jiǎng)轉(zhuǎn)動(dòng)的圈數(shù)
var rNum = rounds*8; //標(biāo)記跑動(dòng)的次數(shù)（這是一個(gè)條件判斷分界線）
i 是用來計(jì)算li標(biāo)簽滾動(dòng)的次數(shù)，滾動(dòng)一次加1青瀑；
rounds 及 rNum 用來讓滾動(dòng)抽獎(jiǎng)變慢及停止的判斷條件璧亮；
4. prizenum
var prizenum = prize[i%li.length]; //通過i余8得到此刻在prize數(shù)組中的數(shù)字，該數(shù)字就是mask標(biāo)記出現(xiàn)的位置
li[prizenum].className = "active";
i%li.length 為i除以li標(biāo)簽長(zhǎng)度得到的余數(shù)(始終為0-7范圍的整數(shù))斥难，放進(jìn)prize數(shù)組中枝嘶，得到的prizenum數(shù)字就是當(dāng)前滾動(dòng)到的li標(biāo)簽索引值
聲明：文章已取得微信公眾號(hào) GitWeb 授權(quán)，轉(zhuǎn)載需標(biāo)明文章來源出處
image
