JavaScript手寫九宮格抽獎demo
更新時間：2023年10月08日 09:26:10 作者：Winn
這篇文章主要為大家介紹了JavaScript 手寫九宮格抽獎demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
引言
九格宮抽獎相信大家都玩過，今天就用 JavaScript 寫個九宮格抽獎玩玩。讓中獎不再是夢！
1.預(yù)覽效果
效果圖為屏幕錄制軟件生成，以至于出現(xiàn)滾動不連貫。實際運行中不會出現(xiàn)不連貫的滾動效果
2.完整代碼
代碼可直接復(fù)制運行查看效果（圖片記得更換）
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 實現(xiàn)九宮格抽獎</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 實現(xiàn)九宮格抽獎</h3>
<div id="container">
<ul id="list">
<!-- img標(biāo)簽放獎品圖片 -->
<!-- mask類為抽獎滾動起來的標(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;">開始抽獎</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><!-- 獲獎信息展示 -->
</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;//定義一個抽獎開關(guān)
var prize = [0,1,2,4,7,6,5,3];//獎品li標(biāo)簽滾動的順序
var num = 0;//num用來存放得到的隨機函數(shù)，也就是抽中的獎品
//開始抽獎
function startlottery(){
if(bReady) {//當(dāng)抽獎開關(guān)為true的時候，可點擊抽獎
message.style.display="none";//將獲獎信息div隱藏（以防止上次抽獎信息還顯示）
span.style.background="#ada7a8";
bReady = false;//抽獎開關(guān)設(shè)為false 處于抽獎中 即不能點擊抽獎
num = getrandomnum(1,9)//得到一個隨機數(shù)（即獎品）
// console.log(num)
startinit(num);//執(zhí)行抽獎初始化
}
}
//抽中的獎品 返回1-9的整數(shù)，包含1，不包含9
function getrandomnum(n, m) {
return parseInt((m - n) * Math.random() + n);
}
//抽獎初始化
function startinit(num) {
var i = 0; //定義一個i 用來計算抽獎跑動的總次數(shù)
var t =200; //抽獎跑動的速度 初始為200毫秒
var rounds = 5; //抽獎轉(zhuǎn)動的圈數(shù)
var rNum = rounds*8; //標(biāo)記跑動的次數(shù)（這是一個條件判斷分界線）
timer = setTimeout(startscroll, t);//每t毫秒執(zhí)行startscroll函數(shù)
//抽獎滾動的函數(shù)
function startscroll() {
//每次滾動抽獎將所有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í)行抽獎滾動
}else if(i>= rNum-8 && i< rNum+num){
//t時間變長，此時計時器運行速度降低，同時標(biāo)簽刷新速度也降低
t+=(i-rNum+8)*5;
timer = setTimeout(startscroll, t);//繼續(xù)執(zhí)行抽獎滾動
}
if( i >= rNum+num){//當(dāng)i大于轉(zhuǎn)rNum加隨機數(shù)字num次計時器結(jié)束，出現(xiàn)提示框提示中獎信息
if (num==1) {
message.innerHTML="恭喜你中了耳機";
}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="恭喜你中了白色手機";
}else if(num==7){
message.innerHTML="恭喜你中了黑色手機";
}else if(num==8){
message.innerHTML="恭喜你中了藍色鞋子";
}
var timer2 = null;
timer2 = setTimeout(function(){
message.style.display="block";//獎品展示的信息為顯示狀態(tài)
span.style.background="#ff3a59";
clearTimeout(timer2);
},1000);
bReady = true;//當(dāng)計時器結(jié)束后讓span標(biāo)簽變?yōu)槌楠劆顟B(tài)
clearTimeout(timer);
}
}
}
</script>
</html>3.代碼分析
- prize
var prize = [0,1,2,4,7,6,5,3];//獎品li標(biāo)簽滾動的順序
數(shù)組prize中的數(shù)字就是li標(biāo)簽對應(yīng)的索引值，由于是九宮格抽獎，因此抽獎滾動的順序并不是按li標(biāo)簽的索引順序，以下是li標(biāo)簽實際滾動的順序圖分析：
- getrandomnum(1,9)
//抽中的獎品 返回1-9的整數(shù)，包含1，不包含9
function getrandomnum(n, m) {
return parseInt((m - n) * Math.random() + n);
}因為只有8個獎品，所以得到的隨機整數(shù)不包含9
- 變量 i、rounds、rNum
var i = 0; //定義一個i 用來計算抽獎跑動的總次數(shù)
var rounds = 5; //抽獎轉(zhuǎn)動的圈數(shù)
var rNum = rounds*8; //標(biāo)記跑動的次數(shù)（這是一個條件判斷分界線）i 是用來計算li標(biāo)簽滾動的次數(shù)，滾動一次加1；
rounds 及 rNum 用來讓滾動抽獎變慢及停止的判斷條件；
- 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)簽長度得到的余數(shù)(始終為0-7范圍的整數(shù))，放進prize數(shù)組中，得到的prizenum數(shù)字就是當(dāng)前滾動到的li標(biāo)簽索引值
以上就是JavaScript手寫九宮格抽獎demo的詳細內(nèi)容，更多關(guān)于JavaScript 九宮格抽獎的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本篇文章通過實例給大家詳細分析了JS與Node.js中的事件的原理以及用法，大家學(xué)習(xí)一下吧。2017-12-12
微信小程序 高德地圖路線規(guī)劃實現(xiàn)過程詳解
這篇文章主要介紹了微信小程序 路線規(guī)劃實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單翻牌小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
JavaScript獲取數(shù)組最后一個元素的3種方法以及性能
在開發(fā)過程中,我們常常需要得到j(luò)s數(shù)組的最后一個數(shù)組元素,下面這篇文章主要給大家介紹了關(guān)于JavaScript獲取數(shù)組最后一個元素的3種方法以及性能,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了js如何獲取url中"?"后面的字串,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)select二級下拉效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
javascript動態(tài)分頁的實現(xiàn)方法實例
最近的項目需要添加一個分頁導(dǎo)航的功能,沒有用網(wǎng)上封裝好的文件,通過JS自己簡單實現(xiàn)了效果,這篇文章主要給大家介紹了關(guān)于javascript動態(tài)分頁的實現(xiàn)方法,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了JS常用跨域方法實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-12-12
深入了解JavaScript中的二進制操作及位掩碼應(yīng)用
在JavaScript中，二進制操作可以說是一項非常強大和有用的技能，尤其是在處理數(shù)據(jù)和位掩碼時，它們是不可或缺的，本文將介紹JavaScript中的二進制操作，包括什么是二進制以及如何在JavaScript中進行二進制操作2023-06-06
這篇文章主要介紹了js實現(xiàn)圖片旋轉(zhuǎn)的三種方法,需要的朋友可以參考下2014-04-04