js实现实现九宫格乱序抽奖

本文主要是介绍js实现实现九宫格乱序抽奖，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

我们以前写的九宫格抽奖，都是顺时针按照顺序进行旋转抽奖，今天给大家分享一下乱序，就是不按照一定顺序的。

用户的具体步骤：用户点击开始抽奖时，奖项开始随机闪，闪到一定次数后停止并且进行抽奖成功提示；
这个闪到一定的次数，次数是随机的；就是当我们点击按钮时生成一个随机数（就相当于是次数范围我随便设置的50~100）；
当点击按钮时奖品已经开始闪，就需要设置定时器，定时器每隔200毫秒执行一次，每次执行生成一个范围在奖品数量之内的数字当下标，然后让对应奖品的颜色切换一下
另外再声明一个变量为0，每次闪动加1，当这个值等于或者大于生成的50-100之间的随机数时抽奖结束并进行奖品内容提示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>选夫九宫格抽奖2</title><script src="js/jquery-3.7.1.min.js"></script><style>* {margin: 0;padding: 0;}h1 {text-align: center;font-family: 宋体;}.box {font-family: 宋体;width: 340px;height: 340px;text-align: center;line-height: 100px;background-color: cornflowerblue;position: absolute;margin: 5% 40%;}.div1 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 10px;left: 10px;}.div2 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 10px;left: 120px;}.div3 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 10px;left: 230px;}.div4 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 120px;left: 230px;}.div5 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 230px;left: 230px;}.div6 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 230px;left: 120px;}.div7 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 230px;left: 10px;}.div8 {width: 30%;height: 30%;background-color: aqua;position: absolute;top: 120px;left: 10px;}#but {font-family: 宋体;width: 30%;height: 30%;top: 120px;left: 1px;background-color: deepskyblue;position: relative;}</style></head><body><h1>九宫格抽奖</h1><div class="box"><div class="div1">和张晚意吃饭</div><div class="div2">和成毅吃饭</div><div class="div3">和檀健次吃饭</div><div class="div4">和王星越吃饭</div><div class="div5">和李现吃饭</div><div class="div6">和魏大勋吃饭</div><div class="div7">和邓为吃饭</div><div class="div8">和林更新吃饭</div><button id="but">开始抽奖</button></div><script>// 获取按钮let button = document.getElementById('but');// 获取最大的divlet box = document.getElementsByClassName('box')[0];console.log(box);// 获取box里的div标签let award = box.getElementsByTagName('div');console.log(award);// 创建全局变量k初始化为0let k = 0;// 闪动的次数初始值let count = 0;// 定时器let int;let num;// 创建全局变量时间time的初始值为500.let time = 100;button.onclick = but;// 点击按钮时会触发的事件function but() {setTimeout(one, time);// 向上取整随机数 取值50~100num = Math.floor(Math.random() * 51) + 50;// 点击按钮的时候为空button.onclick = null;}// 定时器function one() {for (let i = 0; i < award.length; i++) {award[i].style.backgroundColor = 'aqua';}k = Math.floor(Math.random() * award.length);console.log(k);award[k].style.backgroundColor = '#81b5f8';// 闪动的次数加一count++;// 判断闪动的次数大于等于50~100的这个区间时if (count >= num) {// 清除永久性定时器并执行一次性定时器的弹窗clearInterval(int);count = 0;time = 100;button.onclick = but;// 获取div下标的内容let text = award[k].innerHTML;// 使用一次性定时器执行抽奖过后的弹窗setTimeout(function() {alert('恭喜您荣获' + '"' + text + '"' + "的机会!");}, 300);} else {// 否则清除永久定时器，继续执行intclearInterval(int);int = setInterval(one, time);}}</script></body>
</html>