JavaScript手寫九宮格抽獎(jiǎng)demo
更新時(shí)間：2023年10月08日 09:26:10 作者：Winn
這篇文章主要為大家介紹了JavaScript 手寫九宮格抽獎(jiǎng)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
引言
九格宮抽獎(jiǎng)相信大家都玩過(guò)，今天就用 JavaScript 寫個(gè)九宮格抽獎(jiǎng)玩玩。讓中獎(jiǎng)不再是夢(mèng)！
1.預(yù)覽效果
效果圖為屏幕錄制軟件生成，以至于出現(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)起來(lái)的標(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用來(lái)存放得到的隨機(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 用來(lá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]; //通過(guò)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.代碼分析
- 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)的順序圖分析：
- 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
- 變量 i、rounds、rNum
var i = 0; //定義一個(gè)i 用來(lá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 是用來(lái)計(jì)算li標(biāo)簽滾動(dòng)的次數(shù)，滾動(dòng)一次加1；
rounds 及 rNum 用來(lái)讓滾動(dòng)抽獎(jiǎng)變慢及停止的判斷條件；
- prizenum
var prizenum = prize[i%li.length]; //通過(guò)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)簽索引值
以上就是JavaScript手寫九宮格抽獎(jiǎng)demo的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 九宮格抽獎(jiǎng)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
實(shí)例分析JS與Node.js中的事件循環(huán)
本篇文章通過(guò)實(shí)例給大家詳細(xì)分析了JS與Node.js中的事件的原理以及用法，大家學(xué)習(xí)一下吧。2017-12-12
微信小程序 高德地圖路線規(guī)劃實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了微信小程序 路線規(guī)劃實(shí)現(xiàn)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單翻牌小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
JavaScript獲取數(shù)組最后一個(gè)元素的3種方法以及性能
在開發(fā)過(guò)程中,我們常常需要得到j(luò)s數(shù)組的最后一個(gè)數(shù)組元素,下面這篇文章主要給大家介紹了關(guān)于JavaScript獲取數(shù)組最后一個(gè)元素的3種方法以及性能,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
這篇文章主要介紹了js如何獲取url中"?"后面的字串,需要的朋友可以參考下2014-05-05
微信小程序?qū)崿F(xiàn)select二級(jí)下拉
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)select二級(jí)下拉效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
javascript動(dòng)態(tài)分頁(yè)的實(shí)現(xiàn)方法實(shí)例
最近的項(xiàng)目需要添加一個(gè)分頁(yè)導(dǎo)航的功能,沒(méi)有用網(wǎng)上封裝好的文件,通過(guò)JS自己簡(jiǎn)單實(shí)現(xiàn)了效果,這篇文章主要給大家介紹了關(guān)于javascript動(dòng)態(tài)分頁(yè)的實(shí)現(xiàn)方法,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了JS常用跨域方法實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
深入了解JavaScript中的二進(jìn)制操作及位掩碼應(yīng)用
在JavaScript中，二進(jìn)制操作可以說(shuō)是一項(xiàng)非常強(qiáng)大和有用的技能，尤其是在處理數(shù)據(jù)和位掩碼時(shí)，它們是不可或缺的，本文將介紹JavaScript中的二進(jìn)制操作，包括什么是二進(jìn)制以及如何在JavaScript中進(jìn)行二進(jìn)制操作2023-06-06
js實(shí)現(xiàn)圖片旋轉(zhuǎn)的三種方法
這篇文章主要介紹了js實(shí)現(xiàn)圖片旋轉(zhuǎn)的三種方法,需要的朋友可以參考下2014-04-04