JavaScript手寫九宮格抽獎(jiǎng)demo
更新時(shí)間：2023年10月08日 09:26:10 作者：Winn
這篇文章主要為大家介紹了JavaScript 手寫九宮格抽獎(jiǎng)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
引言
九格宮抽獎(jiǎng)相信大家都玩過，今天就用 JavaScript 寫個(gè)九宮格抽獎(jiǎng)玩玩。讓中獎(jiǎ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)起來的標(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í)間變長，此時(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 用來計(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)變慢及停止的判斷條件；
- 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ù))，放進(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)文章
檢查JavaScript對(duì)象屬性是否存在的方法小結(jié)
在前端開發(fā)面試,面試官提出了一個(gè)經(jīng)典的JavaScript問題：“在JavaScript中,如何檢查對(duì)象是否包含某個(gè)屬性？請(qǐng)你詳細(xì)介紹幾種不同的方法,并解釋它們的區(qū)別,”這個(gè)問題考驗(yàn)?zāi)銓?duì)JavaScript的基礎(chǔ)掌握情況,讓我們進(jìn)入這個(gè)面試場景,需要的朋友可以參考下2024-09-09
9102了，你還不會(huì)移動(dòng)端真機(jī)調(diào)試嗎
這篇文章主要介紹了9102了，你還不會(huì)移動(dòng)端真機(jī)調(diào)試嗎，本文詳細(xì)的介紹了3種移動(dòng)端真機(jī)調(diào)試方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-03-03
這篇文章介紹了JS獲取農(nóng)歷日期具體實(shí)例，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了javascript屬性訪問表達(dá)式用法,實(shí)例分析了javascript屬性訪問表達(dá)式的功能與使用方法,需要的朋友可以參考下2015-04-04
javascript函數(shù)中的3個(gè)高級(jí)技巧
這篇文章主要為大家詳細(xì)介紹了javascript函數(shù)中的3個(gè)高級(jí)技巧,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了JavaScript TAB欄切換效果的示例，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-11-11
JavaScript高級(jí)程序設(shè)計(jì)閱讀筆記（六） ECMAScript中的運(yùn)算符（二）
ECMAScript中的運(yùn)算符，學(xué)習(xí)js的朋友可以參考下2012-02-02
小程序webview內(nèi)網(wǎng)頁實(shí)現(xiàn)微信支付的代碼示例
這篇文章主要介紹了在小程序中使用webview實(shí)現(xiàn)微信支付功能,需要在小程序和webview之間進(jìn)行交互,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02![[js+css]點(diǎn)擊隱藏層,點(diǎn)擊另外層不能隱藏原層](http://img.jbzj.com/images/xgimg/bcimg8.png)
[js+css]點(diǎn)擊隱藏層,點(diǎn)擊另外層不能隱藏原層
[js+css]點(diǎn)擊隱藏層,點(diǎn)擊另外層不能隱藏原層...2007-03-03
JavaScript中的console.trace()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.trace()函數(shù)詳細(xì)介紹,console.trace()函數(shù)用來打印函數(shù)調(diào)用的棧信息,需要的朋友可以參考下2014-12-12