简易抽奖器功能-CSDN博客

本文链接：https://blog.csdn.net/Admin_76/article/details/134026637

效果图

逻辑

点击开始，触发一个定时器
定时器内部，随机一个数，通过这个数来获取奖品所在元素
必须设置一个时间点，停止定时器

CSS代码示例

<style type="text/css">
			#fa {
				width: 600px;
				height: 600px;
				border: 1px solid red;
			}
			#fa>div {
				width: 33%;
				height: 33%;
				border: 1px solid red;
				float : left;
				line-height: 200px ;
				text-align: center;
				font-size: 30px;
				font-weight: bold;
			}
			#start {
				cursor: pointer;
				background-color: pink;
			}
</style>

案例代码

<body>
		<div id="fa">
			<div class="option">1</div>
			<div class="option">2</div>
			<div class="option">3</div>
			<div class="option">4</div>
			<div id="start">开始抽奖</div>
			<div class="option">6</div>
			<div class="option">7</div>
			<div class="option">8</div>
			<div class="option">9</div>
		</div>
		<script type="text/javascript">
			// 逻辑：
			// 	1.点击开始，触发一个定时器
			// 	2.定时器内部，随机一个数，通过这个数来获取奖品所在元素
			// 	3.必须设置一个时间点，停止定时器
			
			let but = document.getElementById('start');
			let options = document.getElementsByClassName('option');
			let timer = null;
			but.onclick = function() {
				// 定义一个初始值作为时间判断
				let num = 0;
				// 1.触发一个定时器
				if (timer == null) {
					timer = setInterval(() => {
						num++;
						// 2.随机0~7的数，通过数组下标获取具体选中的元素
						let ran = Math.round(Math.random()*(7-0) + 0);
						
						// 把所有的元素都恢复原来样式
						for (var i = 0; i < options.length; i++) {
							options[i].style.backgroundColor = '#FFFFFF';
						}
						// 3.给选中元素添加样式
						options[ran].style.backgroundColor = 'orange';
						
						// 4.给定时器设置一个有效时间，停止定时器
						if (num >= 50) {
							clearInterval(timer);
							timer = null;
						}
					},100);
				}
				
			}
</script>