本文实例为大家分享了JS实现九宫格抽奖的具体代码，供大家参考，具体内容如下
上代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<div class="wrapper"> <div>谢谢惠顾</div> <div>十万元现金</div> <div>谢谢惠顾</div> <div>iphone11</div> <div>抽奖</div> <div>美的冰箱</div> <div>谢谢惠顾</div> <div>50元红包</div> <div>谢谢惠顾</div> </div><div class="result"></div> |
CSS样式代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<style> .wrapper { width: 300px; height: 300px; display: flex; flex-flow: row wrap; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 1px solid red; } .wrapper div { flex: none; width: 100px; height: 100px; box-sizing: border-box; border: 1px solid red; display: flex; align-items: center; justify-content: center; } .active { background-color: red; } .wrapper div:nth-child(5) { cursor: pointer; } .result { height: 100px; display: inline-block; position: absolute; top: 50px; left: 0; right: 0; margin: auto; text-align: center; line-height: 100px; font-size: 40px; font-weight: 700; color: #ff4400; }</style> |
JS代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<script> var t, m, num, time, index, target, current; //以索引值为0，1，2，5，8，7，6，3的div元素为循环目标， //因为以num总数递减的方式进行循环，故将数组倒序定义 var arr = [3, 6, 7, 8, 5, 2, 1, 0]; var div = document.querySelectorAll('.wrapper div'); var result = document.querySelector('.result'); div[4].onclick = function() { clearInterval(time); div[4].innerHTML = '抽奖中...'; result.innerHTML = ''; //中奖目标设为0到7的随机整数 target = Math.floor(Math.random() * 8); //起始位置设为随机，且以num为总的循环数 num = Math.floor(Math.random() * 8) + 40; //将总循环数的2/3保存，方便调整速率峰值出现的时间 //若m为总循环的1/2，则速度峰值会在总时长的中间出现 m = Math.floor(num * 2 / 3); //此处if语句可限制中奖，从第一个开始外圈顺时针分别对应7，6，5，4，3，2，1，0 //如设置target == 6 即限制中十万元现金，以下代码为100%不中奖 if (target == 6|| target == 4 || target == 2 || target == 0) { target++; } speed(); function speed() { //将循环目标div的索引值转换为循环总数的表达式 index = arr[num % 8]; //给当前循环元素添加样式，并移除之前的样式 if (current) { current.remove('active'); } div[index].classList.add('active'); current = div[index].classList; //速度函数，可调试速率 t = Math.floor(Math.pow((num - m), 2) + 250); //一次性定时器，嵌套递归循环控制速度 time = setTimeout(function() { speed() }, t) //判断中奖结果 if (num == target) { clearTimeout(time); div[4].innerHTML = '抽奖'; switch (target) { case 6: result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML + '大奖'; break; case 4: result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML; break; case 2: result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML; break; case 0: result.innerHTML = '恭喜您抽中' + div[arr[target % 8]].innerHTML; break; default: result.innerHTML = div[arr[target % 8]].innerHTML; } } num--; } }</script> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/nervousfrog/article/details/108551049
