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

聂聂脸

于 2024-06-12 21:37:57 发布

阅读量445

点赞数 6

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_79420857/article/details/139637082

版权

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

用户的具体步骤：用户点击开始抽奖时，奖项开始随机闪，闪到一定次数后停止并且进行抽奖成功提示；
这个闪到一定的次数，次数是随机的；就是当我们点击按钮时生成一个随机数（就相当于是次数范围我随便设置的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');
			// 获取最大的div
			let box = document.getElementsByClassName('box')[0];
			console.log(box);
			// 获取box里的div标签
			let award = box.getElementsByTagName('div');
			console.log(award);
			// 创建全局变量k初始化为0
			let k = 0;
			// 闪动的次数初始值
			let count = 0;
			// 定时器
			let int;
			let num;
			// 创建全局变量时间time的初始值为500.
			let time = 100;
			button.onclick = but;
			// 点击按钮时会触发的事件
			function but() {
				setTimeout(one, time);
				// 向上取整随机数 取值50~100
				num = 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 {
					// 否则清除永久定时器，继续执行int
					clearInterval(int);
					int = setInterval(one, time);
				}
			}
		</script>
	</body>
</html>

注意：最重要的是奖项背景颜色的设置！我在这里卡了很久！应该在定时器内每执行一次循环一次奖项的长度然后设置奖项的默认背景颜色；再通过随机数设置奖项抽中的颜色；我在这里执行顺序一直没弄明白！不过现在明白了！

聂聂脸

关注

6
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现实现九宫格乱序抽奖

注意：最重要的是奖项背景颜色的设置！应该在定时器内每执行一次循环一次奖项的长度然后设置奖项的默认背景颜色；再通过随机数设置奖项抽中的颜色；我在这里执行顺序一直没弄明白！我们以前写的九宫格抽奖，都是顺时针按照顺序进行旋转抽奖，今天给大家分享一下乱序，就是不按照一定顺序的。
复制链接

扫一扫