一、頁面佈局 預設九宮格圖 九宮格占點陣圖 HTML頁面代碼： 二、頁面樣式 九宮格佈局相關CSS頁面樣式： 三、代碼邏輯 Luck幸運抽獎函數方法： 獎品列表DOM拼接： javascript / 獎品列表排序 / let sortList = function(data, el) { var ...
一、頁面佈局
預設九宮格圖 九宮格占點陣圖
HTML頁面代碼：
<!-- center為九宮格區域 -->
<div class="center">
<!-- box為九個格子，DOM拼接區域 -->
<ul id="box">
<!-- li中下標從0開始，0-8共九個格子 -->
<li class="prize jp-0 active">
<!-- 動態獲取獎品圖標和文字描述 -->
<img src="" draggable="false">
<p>xxxx</p>
</li>
<li>1</li>
<li>2</li>
<li>3</li>
<!-- 其中下標為4的格子是最中心的按鈕 -->
<li class="no-price" id="drawBtn">
<div>開始抽獎</div>
</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>二、頁面樣式
九宮格佈局相關CSS頁面樣式：
.center ul {
box-sizing: border-box;
padding: 15px;
width: 100%;
height: 100%;
}
ul li {
float: left;
box-sizing: border-box;
width: 195px;
height: 195px;
background: #fff;
border-radius: 6px;
text-align: center;
}
ul li:nth-child(2),
ul li:nth-child(8) {
margin: 0 15px;
}
ul li:nth-child(4),
ul li:nth-child(6) {
margin: 15px 0;
}
ul li:nth-child(5) {
cursor: pointer;
margin: 15px;
background: #f86f05;
}
ul li:nth-child(5):hover {
opacity: 0.8;
}
ul li > img {
margin-top: 20px;
width: 104px;
height: 104px;
}
ul li > p {
line-height: 40px;
font-size: 28px;
color: #ff9f00;
}
ul li.no-price {
padding: 15px 0;
}
ul li.no-price div {
padding: 10px 16px;
line-height: 60px;
font-size: 54px;
color: #fff;
letter-spacing: 2px;
}
ul li.no-price p.tips {
line-height: 30px;
font-size: 16px;
color: #fff;
font-weight: bold;
text-align: center;
}
#box li.active {
background: #fcff76;
}三、代碼邏輯
Luck幸運抽獎函數方法：
// 抽獎動畫效果
var luck = {
index: -1, //當前轉動到哪,起點位置
count: 0, //共有多少個位置
timer: 0, //setTimeout的ID,用clearTimeout清除
speed: 20, //初始化轉動速度
times: 0, //轉動次數
cycle: 25, //轉動基本次數:即轉動多少次之後進入抽獎環節
prize: -1, //中獎位置
init: function(id) {
if ($("#" + id).find(".prize").length > 0) {
$luck = $("#" + id);
$units = $luck.find(".prize");
this.obj = $luck;
this.count = $units.length;
$luck.find(".jp-" + this.index).addClass("active");
}
},
roll: function() {
var index = this.index;
var count = this.count;
var luck = this.obj;
$(luck)
.find(".jp-" + index)
.removeClass("active");
index += 1;
if (index > count - 1) index = 0;
$(luck)
.find(".jp-" + index)
.addClass("active");
this.index = index;
return false;
},
stop: function(index) {
this.prize = index;
return false;
}
};獎品列表DOM拼接：
/* 獎品列表排序 */
let sortList = function(data, el) {
var str = "",
sortArr = [];
for (let i = 0, len = data.length; i < len; i++) {
let tmp = data[i];
if (i == 3) {
sortArr[
i
] = `<li class="prize jp-7" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
} else if (i == 4) {
sortArr[
i
] = `<li class="no-price" id="drawBtn"><div>開始抽獎</div><p class="tips">註：獎品以最終實物為準</p></li>`;
sortArr[5] = `<li class="prize jp-3" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
} else if (i == 5) {
sortArr[6] = `<li class="prize jp-6" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
} else if (i == 6) {
sortArr[7] = `<li class="prize jp-5" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
} else if (i == 7) {
sortArr[8] = `<li class="prize jp-4" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
} else {
sortArr[
i
] = `<li class="prize jp-${i}" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
}
}
$("#" + el).html(sortArr.join(""));
// 在拼接完頁面之後再初始化抽獎邏輯函數，否則獲取不到li的DOM節點列表
luck.init("box");
};時間、速度、中獎編號&中獎獎品下標控制：
/* 時間、速度、中獎編號控制 */
function roll() {
luck.times += 1;
luck.roll();
if (luck.times > luck.cycle + 10 && luck.prize == luck.index) {
clearTimeout(luck.timer);
luck.prize = -1;
luck.times = 0;
click = false;
} else {
if (luck.times < luck.cycle) {
luck.speed -= 20;
} else if (luck.times == luck.cycle) {
// 獎品位置下標
if (prizeInfo.index != "") {
luck.prize = prizeInfo.index;
}
} else {
if (
luck.times > luck.cycle + 10 &&
((luck.prize == 0 && luck.index == 7) ||
luck.prize == luck.index + 1)
) {
luck.speed += 110;
} else {
luck.speed += 20;
}
}
if (luck.speed < 40) luck.speed = 40;
luck.timer = setTimeout(roll, luck.speed);
}
return false;
}
// 初始化點擊事件為false，防止多次點擊造成動畫累積
var click = false;點擊抽獎實現：
/* 點擊抽獎 */
$("#box").on("click", "li#drawBtn", function() {
if (click) {
return false;
} else {
$.post(`api`, { genre: 3, type: 2 }, function(res) {
if (res.code == 1) {
let data = res.result_data;
let gId = data.goodGid,
pIndex = "";
$("#prizeImg").attr("src", data.pic);
$("#prizeTips").html(data.name);
let arr = prizeList;
for (let i = 0, len = arr.length; i < len; i++) {
let goodGid = arr[i]["goodGid"];
if (gId == goodGid) {
switch (i) {
case 3:
prizeInfo.index = 7;
break;
case 4:
prizeInfo.index = 3;
break;
case 5:
prizeInfo.index = 6;
break;
case 6:
prizeInfo.index = 5;
break;
case 7:
prizeInfo.index = 4;
break;
default:
prizeInfo.index = i;
break;
}
break;
}
}
// 抽獎
luck.speed = 100;
roll();
click = true;
let timer = setTimeout(function() {
clearTimeout(timer);
$("#mask").fadeIn();
}, 4000);
return false;
} else {
alert(res.message);
}
});
}
});
