#九宫格抽奖逻辑梳理
预计阅读时间: 小于 1 分钟#页面布局
-
默认九宫格图
-
九宫格占位图
#HTML 页面代码
代码示例
1<!-- center为九宫格区域 -->
2<div class="center">
3 <!-- box为九个格子，DOM拼接区域 -->
4 <ul id="box">
5 <!-- li中下标从0开始，0-8共九个格子 -->
6 <li class="prize jp-0 active">
7 <!-- 动态获取奖品图标和文字描述 -->
8 <img src="" draggable="false" />
9 <p>xxxx</p>
10 </li>
11 <li>1</li>
12 <li>2</li>
13 <li>3</li>
14 <!-- 其中下标为4的格子是最中心的按钮 -->
15 <li class="no-price" id="drawBtn">
16 <div>开始抽奖</div>
17 </li>
18 <li>5</li>
19 <li>6</li>
20 <li>7</li>
21 <li>8</li>
22 </ul>
23</div>#页面样式
九宫格布局相关 CSS 页面样式
代码示例
1.center ul {
2 box-sizing: border-box;
3 padding: 15px;
4 width: 100%;
5 height: 100%;
6}
7
8ul li {
9 float: left;
10 box-sizing: border-box;
11 width: 195px;
12 height: 195px;
13 background: #fff;
14 border-radius: 6px;
15 text-align: center;
16}
17
18ul li:nth-child(2),
19ul li:nth-child(8) {
20 margin: 0 15px;
21}
22
23ul li:nth-child(4),
24ul li:nth-child(6) {
25 margin: 15px 0;
26}
27
28ul li:nth-child(5) {
29 cursor: pointer;
30 margin: 15px;
31 background: #f86f05;
32}
33
34ul li:nth-child(5):hover {
35 opacity: 0.8;
36}
37
38ul li > img {
39 margin-top: 20px;
40 width: 104px;
41 height: 104px;
42}
43
44ul li > p {
45 line-height: 40px;
46 font-size: 28px;
47 color: #ff9f00;
48}
49
50ul li.no-price {
51 padding: 15px 0;
52}
53
54ul li.no-price div {
55 padding: 10px 16px;
56 line-height: 60px;
57 font-size: 54px;
58 color: #fff;
59 letter-spacing: 2px;
60}
61
62ul li.no-price p.tips {
63 line-height: 30px;
64 font-size: 16px;
65 color: #fff;
66 font-weight: bold;
67 text-align: center;
68}
69
70#box li.active {
71 background: #fcff76;
72}#代码逻辑
Luck 幸运抽奖函数方法：
代码示例
1// 抽奖动画效果
2var luck = {
3 index: -1, //当前转动到哪,起点位置
4 count: 0, //共有多少个位置
5 timer: 0, //setTimeout的ID,用clearTimeout清除
6 speed: 20, //初始化转动速度
7 times: 0, //转动次数
8 cycle: 25, //转动基本次数:即转动多少次之后进入抽奖环节
9 prize: -1, //中奖位置
10 init: function (id) {
11 if ($("#" + id).find(".prize").length > 0) {
12 $luck = $("#" + id);
13 $units = $luck.find(".prize");
14 this.obj = $luck;
15 this.count = $units.length;
16 $luck.find(".jp-" + this.index).addClass("active");
17 }
18 },
19 roll: function () {
20 var index = this.index;
21 var count = this.count;
22 var luck = this.obj;
23 $(luck)
24 .find(".jp-" + index)
25 .removeClass("active");
26 index += 1;
27 if (index > count - 1) index = 0;
28 $(luck)
29 .find(".jp-" + index)
30 .addClass("active");
31 this.index = index;
32 return false;
33 },
34 stop: function (index) {
35 this.prize = index;
36 return false;
37 }
38};奖品列表 DOM 拼接：
代码示例
1/* 奖品列表排序 */
2let sortList = function (data, el) {
3 var str = "",
4 sortArr = [];
5 for (let i = 0, len = data.length; i < len; i++) {
6 let tmp = data[i];
7 if (i == 3) {
8 sortArr[i] = `<li class="prize jp-7" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
9 } else if (i == 4) {
10 sortArr[i] = `<li class="no-price" id="drawBtn"><div>开始抽奖</div><p class="tips">注：奖品以最终实物为准</p></li>`;
11 sortArr[5] = `<li class="prize jp-3" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
12 } else if (i == 5) {
13 sortArr[6] = `<li class="prize jp-6" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
14 } else if (i == 6) {
15 sortArr[7] = `<li class="prize jp-5" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
16 } else if (i == 7) {
17 sortArr[8] = `<li class="prize jp-4" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
18 } else {
19 sortArr[
20 i
21 ] = `<li class="prize jp-${i}" data-gid="${tmp.goodGid}"><img src="${tmp.pic}" draggable="false"><p>${tmp.name}</p></li>`;
22 }
23 }
24 $("#" + el).html(sortArr.join(""));
25 // 在拼接完页面之后再初始化抽奖逻辑函数，否则获取不到li的DOM节点列表
26 luck.init("box");
27};时间、速度、中奖编号&中奖奖品下标控制：
代码示例
1/* 时间、速度、中奖编号控制 */
2function roll() {
3 luck.times += 1;
4 luck.roll();
5 if (luck.times > luck.cycle + 10 && luck.prize == luck.index) {
6 clearTimeout(luck.timer);
7 luck.prize = -1;
8 luck.times = 0;
9 click = false;
10 } else {
11 if (luck.times < luck.cycle) {
12 luck.speed -= 20;
13 } else if (luck.times == luck.cycle) {
14 // 奖品位置下标
15 if (prizeInfo.index != "") {
16 luck.prize = prizeInfo.index;
17 }
18 } else {
19 if (luck.times > luck.cycle + 10 && ((luck.prize == 0 && luck.index == 7) || luck.prize == luck.index + 1)) {
20 luck.speed += 110;
21 } else {
22 luck.speed += 20;
23 }
24 }
25 if (luck.speed < 40) luck.speed = 40;
26 luck.timer = setTimeout(roll, luck.speed);
27 }
28 return false;
29}
30// 初始化点击事件为false，防止多次点击造成动画累积
31var click = false;点击抽奖实现：
代码示例
1/* 点击抽奖 */
2$("#box").on("click", "li#drawBtn", function () {
3 if (click) {
4 return false;
5 } else {
6 $.post(`api`, { genre: 3, type: 2 }, function (res) {
7 if (res.code == 1) {
8 let data = res.result_data;
9 let gId = data.goodGid,
10 pIndex = "";
11 $("#prizeImg").attr("src", data.pic);
12 $("#prizeTips").html(data.name);
13 let arr = prizeList;
14 for (let i = 0, len = arr.length; i < len; i++) {
15 let goodGid = arr[i]["goodGid"];
16 if (gId == goodGid) {
17 switch (i) {
18 case 3:
19 prizeInfo.index = 7;
20 break;
21 case 4:
22 prizeInfo.index = 3;
23 break;
24 case 5:
25 prizeInfo.index = 6;
26 break;
27 case 6:
28 prizeInfo.index = 5;
29 break;
30 case 7:
31 prizeInfo.index = 4;
32 break;
33 default:
34 prizeInfo.index = i;
35 break;
36 }
37 break;
38 }
39 }
40 // 抽奖
41 luck.speed = 100;
42 roll();
43 click = true;
44 let timer = setTimeout(function () {
45 clearTimeout(timer);
46 $("#mask").fadeIn();
47 }, 4000);
48 return false;
49 } else {
50 alert(res.message);
51 }
52 });
53 }
54});目 录