介紹：
前端九宮格是一種常見的抽獎方式，js實現如下，掌握其原理，不論多少宮格，都可以輕松應對。（代碼可復制直接運行看效果）。
該案例以四宮格入門，可擴展多宮格，獎品模塊的布局可自由設置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>四宮格抽獎</title>
</head>
<style>
html,body{
width: 100%;
height: 100%;
max-width: 750px;
margin: auto;
}
.outBox{
width: 100%;
height: 60%;
background: gray;
position: relative;
display: flex;
flex-flow: row wrap;
}
.prize{
width: 44%;
height: 40%;
margin: 5% 3%;
text-align: center;
font-size: xx-large;
color: #fff;
padding-top: 15%;
box-sizing: border-box;
border: 6px double #AB945E;
}
.prize.active{
background: goldenrod;
}
.btn{
position: absolute;
left:30%;
bottom:-20%;
width: 40%;
text-align: center;
height: 12%;
font-size: xx-large;
}
</style>
<body>
<div class="outBox" id="lotteryBoxs">
<div class="prize prize-0 one">一等獎</div>
<div class="prize prize-1 two">二等獎</div>
<div class="prize prize-3 four">謝謝參與</div>
<div class="prize prize-2 three">三等獎</div>
<button class="btn">開啟好運</button>
</div>
</body>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function() {
// 轉盤的初定義
var lottery = {
index: 0, //當前轉動到哪個位置，起點位置
count: 0, //總共有多少個位置
timer: 0, //setTimeout的ID，用clearTimeout清除
speed: 10, //初始轉動速度
times: 0, //轉動次數
cycle: 30, //轉動基本次數：即至少需要轉動多少次再進入抽獎環節
prize: 0, //中獎位置
init: function(id) {
if ($("#" + id).find(".prize").length > 0) {
$lottery = $("#" + id);
$units = $lottery.find(".prize");
this.obj = $lottery;
this.count = $units.length;
}
},
roll: function() {
var index = this.index;
var count = this.count;
var lottery = this.obj;
$(lottery).find(".prize").removeClass("active");
index += 1;
if (index > count - 1) {
index = 0;
}
$(lottery).find(".prize-" + this.index).addClass("active");
this.index = index;
return false;
},
stop: function(index) {
this.prize = index;
return false;
}
};
// 中獎轉動事件
function roll() {
lottery.times += 1;
lottery.roll();
var prize_site = $("#lotteryBoxs").attr("prize_site");
if (lottery.times > lottery.cycle + 10 && lottery.index == prize_site) {
var prize_id = $("#lotteryBoxs").attr("prize_id");
var prize_name = $("#lotteryBoxs").attr("prize_name");
console.log(prize_site+"結果")
//中獎情況的判斷--模態框
if(prize_site == 1 || prize_site == 2 || prize_site == 3){
//已中獎
setTimeout(function(){
console.log("恭喜你獲得" + prize_name)
},500)
}else{
//未中獎
setTimeout(function(){
console.log("中獎結果：" + prize_name)
},500)
}
clearTimeout(lottery.timer);
lottery.prize = -1;
lottery.times = 0;
click = false;
} else {
if (lottery.times < lottery.cycle) {
lottery.speed -= 20;
} else if (lottery.times == lottery.cycle) {
var index = Math.random() * (lottery.count) | 0;
lottery.prize = index;
} else {
if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == lottery.count - 1) || lottery.prize == lottery.index + 1)) {
lottery.speed += 90;
} else {
lottery.speed += 30;
}
}
if (lottery.speed < 30) {
lottery.speed = 30;
}
lottery.timer = setTimeout(roll, lottery.speed);
}
return false;
}
var click = false;
// 后台數據的調用
$(function() {
lottery.init('lotteryBoxs');
$(".btn").click(function() {
if (click) {
return false;
} else {
lottery.speed = 100;
//此處數據應該從接口獲取
var prizeArr=["謝謝參與","一等獎","二等獎","三等獎"]
var prizeId = Math.floor(Math.random()*(3-0+1)+0);
var prize_site = prizeId;
console.log("位置"+prizeId);
$("#lotteryBoxs").attr("prize_site", prize_site );
$("#lotteryBoxs").attr("prize_name", prizeArr[prizeId]);
roll();
click = true;
return false;
}
});
})
});
</script>
</html>
頁面效果如下：
