js抽奖（随机抽奖|默认抽奖结果）

最新推荐文章于 2024-07-31 13:55:09 发布

KeYiTangPing

最新推荐文章于 2024-07-31 13:55:09 发布

阅读量552

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_37117408/article/details/127105725

版权

JS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

js抽奖（随机抽奖|默认抽奖结果）

- 效果示例图
- 代码块

效果示例图

在这里插入图片描述

代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>抽奖</title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}

			.luckydraw {
				border: 1px solid red;
				width: 400px;
				height: 400px;
				position: relative;
				margin: 100px auto;
				display: flex;
				flex-wrap: wrap;
			}

			.luckydraw-item {
				border: 1px solid red;
				width: calc(100% / 3);
				height: calc(100% / 3);
				display: flex;
				justify-content: center;
				align-items: center;
				user-select: none;
				font-size: 16px;
			}

			.luckydraw-item:nth-of-type(5) {
				cursor: pointer;
				background-color: #f17070;
				color: #ffffff;
			}

			.current-style {
				background-color: #00a2ef;
				color: #ffffff;
			}
		</style>
	</head>
	<body>
		<div class="luckydraw">
			<div class="luckydraw-item">奖品1</div>
			<div class="luckydraw-item">奖品2</div>
			<div class="luckydraw-item">奖品3</div>
			<div class="luckydraw-item">奖品8</div>
			<div class="luckydraw-item" id="luckydrawBtn">抽奖</div>
			<div class="luckydraw-item">奖品4</div>
			<div class="luckydraw-item">奖品7</div>
			<div class="luckydraw-item">谢谢回顾</div>
			<div class="luckydraw-item">奖品5</div>
		</div>
	</body>
	<script type="text/javascript">
		document.querySelector("#luckydrawBtn").addEventListener("click", () => {
			const circle = getRandomNumber(1, 8); //随机获取1-8之间的数字，数字为多少，多少就中奖
			console.log("[中奖]", circle)
			luckydraw(circle); //设置为6：谢谢回顾
		})

		function luckydraw(index) {
			let time = 100;
			let initCircle = 0;
			const circle = getRandomNumber(3, 6); //旋转多少圈

			let timerHandle = null;
			let count = 0;
			timerHandle = setInterval(function() {
				const luckydraw = [0, 1, 2, 5, 8, 7, 6, 3];
				const active = document.querySelector(".current-style");
				if (active) {
					active.classList.remove("current-style")
				}
				document.querySelectorAll(".luckydraw-item")[luckydraw[count]].classList.add("current-style");
				count++;
				initCircle++;
				if (count >= 8) {
					count = 0;
				}
				if (initCircle >= circle * 8 + index) {
					clearInterval(timerHandle)
				}
			}, time)
		}

		function getRandomNumber(min, max) {
			min = Math.ceil(min);
			max = Math.floor(max);
			return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
		}
	</script>
</html>