#九宫格抽奖案例
预计阅读时间: 2 分钟#抽奖模型和拼接模型
-
九宫格模型「图 1」
-
拼接图模型「图 2」
提示「📢」：
当动态实现九宫格奖品信息展示时，若想按照图 1 位置显示奖品信息，则此时需要换一下九宫格的位置。 替换位置为：4→8、6→4、8→6、9→5、5→○（○ 即抽奖按钮）
#封装奖品列表排序方法
代码示例
1/* 九宫格奖品列表排序 */
2function sortList(data, el) {
3 var ID4,
4 str = "";
5 for (var i = 0; i < data.length; i++) {
6 if (i == 3) {
7 //3->7
8 str += "<div class='prize jp-" + 7 + "'><img src='" + data[i].pic + "'><p>" + data[i].name + "</p></div>";
9 } else if (i == 4) {
10 // 4
11 ID4 = 4;
12 str += "<div id='Btn'><p>开始抽奖</p></div>";
13 } else if (i == 5) {
14 //5->3
15 str += "<div class='prize jp-" + 3 + "'><img src='" + data[i].pic + "'><p>" + data[i].name + "</p></div>";
16 } else if (i == 7) {
17 //7->5、8->4
18 str +=
19 "<div class='prize jp-" +
20 5 +
21 "'><img src='" +
22 data[i].pic +
23 "'><p>" +
24 data[i].name +
25 "</p></div><div class='prize jp-" +
26 ID4 +
27 "'><img src='" +
28 data[ID4].pic +
29 "'><p>" +
30 data[ID4].name +
31 "</p></div>";
32 } else {
33 str += "<div class='prize jp-" + i + "'><img src='" + data[i].pic + "'><p>" + data[i].name + "</p></div>";
34 }
35 }
36 $("#" + el).html(str);
37}
38
39//初始化抽奖按钮点击属性
40var click = false;#初始全局变量（获奖奖品下标）
代码示例
1// 奖品列表
2var prizeList,
3 // 中奖下标（在奖品列表中的下标）
4 prizeObj = {
5 pIndex: ""
6 };#奖品动画初始化
代码示例
1var luck = {
2 index: -1, //当前转动到哪,起点位置
3 count: 0, //共有多少个位置
4 timer: 0, //setTimeout的ID,用clearTimeout清除
5 speed: 20, //初始化转动速度
6 times: 0, //转动次数
7 cycle: 25, //转动基本次数:即转动多少次之后进入抽奖环节
8 prize: -1, //中奖位置
9 init: function (id) {
10 if ($("#" + id).find(".prize").length > 0) {
11 $luck = $("#" + id);
12 $units = $luck.find(".prize");
13 this.obj = $luck;
14 this.count = $units.length;
15 $luck.find(".jp-" + this.index).addClass("active");
16 }
17 },
18 roll: function () {
19 var index = this.index;
20 var count = this.count;
21 var luck = this.obj;
22 $(luck)
23 .find(".jp-" + index)
24 .removeClass("active");
25 index += 1;
26 if (index > count - 1) index = 0;
27 $(luck)
28 .find(".jp-" + index)
29 .addClass("active");
30 this.index = index;
31 return false;
32 },
33 stop: function (index) {
34 this.prize = index;
35 return false;
36 }
37};#时间、转速、中奖下标控制
代码示例
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 // 奖品位置下标 全局变量prizeObj对象为中奖信息
15 if (prizeObj.pIndex != "") luck.prize = prizeObj.pIndex;
16 } else {
17 if (luck.times > luck.cycle + 10 && ((luck.prize == 0 && luck.index == 7) || luck.prize == luck.index + 1)) {
18 luck.speed += 110;
19 } else {
20 luck.speed += 20;
21 }
22 }
23 if (luck.speed < 40) luck.speed = 40;
24 luck.timer = setTimeout(roll, luck.speed);
25 }
26 return false;
27}#加载抽奖动画
代码示例
1luck.init("prizeBox");
2/* 点击抽奖 */
3$("#Btn").click(function () {
4 if (click) {
5 return false;
6 } else {
7 $.ajax({
8 async: false,
9 url: "url",
10 type: "post",
11 data: {},
12 dataType: "json",
13 success: function (res) {
14 if (res.code) {
15 /* 寻找商品下标 */
16 // 寻找中奖商品下标代码...
17
18 /* 动画 */
19 // 初始转速
20 luck.speed = 100;
21 // 触发动画
22 roll();
23 // 激活点击事件
24 click = true;
25 // 延时动画
26 setTimeout(function () {
27 $("#mask").fadeIn();
28 }, 3600);
29 return false;
30 } else {
31 alert(res.message);
32 }
33 }
34 });
35 return false;
36 }
37});#中奖奖品位置的判断「回显到九宫格上」
代码示例
1function findPirzeIndex(data, goodId) {
2 for (let j = 0, len = data.length; j < len; j++) {
3 if (data[j].goodId == goodId) {
4 switch (j) {
5 case 0:
6 prizeObj.pIndex = 0;
7 break;
8 case 3: // 3->7
9 prizeObj.pIndex = 7;
10 break;
11 case 4: //
12 prizeObj.pIndex = 4;
13 break;
14 case 5: // 5->3
15 prizeObj.pIndex = 3;
16 break;
17 case 7: // 7->5
18 prizeObj.pIndex = 5;
19 break;
20 default:
21 prizeObj.pIndex = j;
22 }
23 }
24 }
25}总结：
通过该方法来查找中奖奖品的位置；查找的元素的下标为该元素在其数组对象中的位置下标，此时对比图 1 和图 2 两个图表的位置信息，就可以确定中奖奖品所在图 1 表盘的具体位置。
目 录