原生JavaScript随机抽奖案例

案例需求：抽奖机中有多个不同的奖项，点击按钮开始进行随机抽奖，默认所有的奖项得到的概率是一致的。

页面布局：大致布一下，可根据喜好进行调整。

<div>
	<div class="awards">特等奖</div>
	<div class="awards">一等奖</div>
	<div class="awards">二等奖</div>
	<div class="awards">三等奖</div>
	<div class="awards">安慰奖</div>
	<div class="awards">鼓励奖</div>
	<div id="start">开始抽奖</div>
</div>

页面样式：可根据自己喜好随意进行编写，这里我粗略写了一下自己的版本。

#start,
.awards {
    
    
	width: 100px;
	height: 100px;
	float: left;
	background: rgb(233, 193, 15);
	margin-left: 10px;
	text-align: center;
	line-height: 100px;
	font-size: 20px;
	font-family: '华文行楷';
	color: white;
	border-radius: 50%;
}
#start {
    
    
	background: #000;
	width: 50px;
	height: 50px;
	line-height: 50px;
	margin-top: 25px;
}

JS实现的内容如下：
点击“开始”按钮，触发一个定时器，规定一个时间以限制定时器触发的次数，在每触发一个定时器时，不断获得一个随机数，通过这个随机数来确定获得的奖项。

//1. 选出所有需要进行操作的元素
let btn = document.querySelector('#start'),
awards = document.querySelectorAll('.awards');

//2.此处先进行设置一个定时器，方便后续清除，也可以防止重复触发定时器产生的bug
let timer = null;

//3.定义一个随机奖项的方法
function randomAwards() {
    
    
	//设置一个初始值作为判断时间停止的标志
	let logo = 0;
	//3.1. 触发一个定时器，此处判断是防止重复触发定时器
	if(timer == null) {
    
    
		timer = setInterval(() => {
    
    
			logo++;
			//3.2. 获得一个随机数作为索引，算法是元素的最后一个索引值 - 第一个索引值 + 初始值
			let random = Math.round(Math.random() * (awards.length - 1 - 0) + 0);
			//3.3. 排他思想：将所有元素恢复原来的样式
			for(let i = 0; i < awards.length; i++) {
    
    
				awards[i].style.backgroundColor = "rgb(233, 193, 15)";
			}
			//3.4. 给选中元素添加样式
			awards[random].style.backgroundColor = 'orange';
			//3.5. 设置定时器有效时间，停止定时器。因为定时器获得随机数的时间是100ms，即0.1秒，所以可以获得的随机数个数便是规定停止的时间/0.1秒，此处规定停止时间是5秒
			if(logo >= 5/(100/1000)) {
    
    
				clearInterval(timer);
				timer = null;
			}
		}, 100)
	}
}

//点击开始抽奖按钮进行抽奖
btn.addEventListener('click', randomAwards());