js简易随机抽奖

js简易抽奖效果

这是纯js知识点实现的哦
不多说上代码

<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.all {
				width: 318px;
				height: 318px;
				margin: 100px auto;
			}
			
			.grid{
				color: white;
			}
			
			#center{
				color: ;
			}
			
			.all>div {
				width: 100px;
				height: 100px;
				background: dodgerblue;
				float: left;
				line-height: 100px;
				text-align: center;
				border: solid;
			}
			//利用伪类选择
			.all>div:nth-of-type(5) {
				background: deepskyblue;
				cursor: pointer;
			}

			#act {
				background: red;
			}
		</style>

可以自己改成需要的样式

<div class="all">
			<div class="grid" id="act">空</div>
			<div class="grid">空</div>
			<div class="grid">一等奖</div>
			<div class="grid">空</div>
			<div id="center">点击抽奖</div>
			<div class="grid">二等奖</div>
			<div class="grid">空</div>
			<div class="grid">三等奖</div>
			<div class="grid">空</div>
		</div>

最后是最重要的js部分

<script>
			var arrDiv = document.getElementsByClassName("grid");//获取所有奖项元素类名
			var oCj = document.getElementById("center");//中心抽奖按钮赋一个值
			var num = 0;
			var time = Math.random() * 5000 + 3200;//转动效果的时间
			oCj.onclick = function() {
				oTime = setInterval(dianji, 200);
			}
			//抽奖按钮的点击事件函数
			function dianji() {
				num = num + 1;
				if (num > arrDiv.length - 1) {
					num = 0
				}
				for (j = 0; j < arrDiv.length; j++) {
					arrDiv[j].id = "";
				}
				arrDiv[num].id = "act";
				setTimeout(stop, time);

				function stop() {
					clearInterval(oTime)
				}
			}
		</script>