用JS来实现九宫格抽奖的功能

博主最近有点忙哈 一直在搞项目 看到粉丝私信一直在催更 我这边也是一有空就会开始分享啦 希望大家多多海涵~

接下来就是大家喜闻乐见的代码环节

首先是HTML部分：

<div class="biggest_box">
			<div class="smaller_box">
				<p>商品一</p>
			</div>
			<div class="smaller_box_two">
				<p>商品二</p>
			</div>
			<div class="smaller_box_three">
				<p>商品三</p>
			</div>
			<div class="smaller_box_four">
				<p>商品四</p>
			</div>
			<div class="smaller_box_five">
				<p>商品五</p>
			</div>
			<div class="smaller_box_six">
				<p>商品六</p>
			</div>
			<div class="smaller_box_seven">
				<p>商品七</p>
			</div>
			<div class="smaller_box_eight">
				<p>没抽到</p>
			</div>
			<button class="smaller_box_nine" style="border: none;">
				<p>点击开冲</p>
			</button>
		</div>

其次是css样式

这里需要注意的是 因为代码都是从上往下解析的 所以按顺序写的格式如果开始执行抽奖的话顺序会乱掉 所以这里就要用到浮动的方法就可以很简单的解决掉这个问题 

按照顺序分别定位到合适位置  例如：
    1 2 3
    8    4
    7 6 5

* {
				margin: 0;
				padding: 0;
			}

			.biggest_box {
				width: 500px;
				height: 500px;
				border: 2px pink solid;
				margin-left: 20%;
				margin-top: 10%;
				position: relative;
				color: #ffffff;
			}

			.smaller_box {
				width: 30%;
				height: 30%;
				position: absolute;
				top: 2%;
				background-color: #0000ff;
				left: 2%;
				font-size: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.smaller_box_two {
				width: 30%;
				height: 30%;
				position: absolute;
				top: 2%;
				background-color: #0000ff;
				left: 35%;
				font-size: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}


			.smaller_box_three {
				width: 30%;
				height: 30%;
				position: absolute;
				top: 2%;
				background-color: #0000ff;
				left: 68%;
				font-size: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.smaller_box_four {
				width: 30%;
				height: 30%;
				position: absolute;
				top: 35%;
				background-color: #0000ff;
				left: 68%;
				font-size: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.smaller_box_five {
				width: 30%;
				height: 30%;
				position: absolute;
				top: 68%;
				background-color: #0000ff;
				left: 68%;
				font-size: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.smaller_box_six {
				width: 30%;
				height: 30%;
				position: absolute;
				top: 68%;
				background-color: #0000ff;
				left: 35%;
				font-size: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.smaller_box_seven {
				width: 30%;
				height: 30%;
				position: absolute;
				top: 68%;
				background-color: #0000ff;
				left: 2%;
				font-size: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.smaller_box_eight {
				width: 30%;
				height: 30%;
				position: absolute;
				top: 35%;
				background-color: #0000ff;
				left: 2%;
				font-size: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.smaller_box_nine {
				width: 30%;
				height: 30%;
				position: absolute;
				top: 35%;
				background-color: #ff00ff;
				left: 35%;
				font-size: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

最后就是实现JS的功能咯：

创建全局变量 time 初始为 300 ，
获取奖品列表，创建函数，在函数内判断 a 是否小于 7 (奖品的数量 - 1)
如果小于7，执行 k++ 让上一个奖品也就是 k - 1 下标对应的奖品颜色再回归为蓝色
让当前选中的奖品也就是 k 下标对应的奖品背景颜色为红色
如果不小于7，表示 k 不能再自增了，需要重新初始为 0 ，
让最后一件奖品 (奖品的数量 - 1 的下标对应的奖品)的背景颜色为蓝色，

            let biggestBox = document.getElementsByClassName('biggest_box')[0];
			let but = document.getElementsByClassName('smaller_box_nine')[0];
			let arr = biggestBox.getElementsByTagName('div');
			// let smaller_box_nine = document.getElementsByClassName('smaller_box_nine')[0];
			// console.log(arr);

			let b;
			let a = 0;
			let num = 0; //圈数
			let time = 300;
			let randNum = 0;

			but.onclick = on;

			function on() {
				// for (let i = 0; i < arr.length; i++) {
				// 	arr[i].style.backgroundColor = '#0000ff';
				// }
				but.onclick = null;
				randNum = Math.floor(Math.random() * 8); //随机整数
				arr[a].style.backgroundColor = '#ff0000';
				b = setInterval(fn, time);
			}

			function fn() {
				if (a < arr.length - 1) {
					a++;
					arr[a - 1].style.backgroundColor = '#0000ff';
				} else {
					a = 0;
					num++;
					arr[arr.length - 1].style.backgroundColor = '#0000ff';
				}
				arr[a].style.backgroundColor = '#ff0000';

				if (num <= 2) {
					if (time <= 100) {
						time = 100;
					} else {
						time -= 20;
					}
				} else {
					if (time >= 300) {
						time = 300;
					} else {
						time += 20;
					}
				}
				// console.log(num);
				if (num > 6 && a == randNum) {
					clearInterval(b);
					num = 0;
					time = 100;
					randNum = 0;
					setTimeout(function() {
						alert('哟，运气可以啊')
						but.onclick = on;
					});
				} else {
					clearInterval(b);
					b = setInterval(fn, time);
				}

			}