九宫格抽奖总结

今天讲解一下九宫格抽奖的制作过程及思路。

首先我们来看九宫格的示例：

就是一个很常见的抽奖效果，从快到慢，直到抽中某一个奖品。利用弹出窗告诉用户抽到的奖励。

实现思路

1. HTML 结构搭建：创建一个包含所有格子和抽奖按钮的容器，每个格子和按钮都作为独立的元素，方便后续通过 CSS 和 JavaScript 进行操作。
2. CSS 样式设计：通过设置容器和格子的样式，包括尺寸、颜色、布局和定位，打造出美观且符合预期布局的九宫格界面。
3. JavaScript 交互逻辑：利用 JavaScript 实现点击抽奖功能，包括控制格子的闪烁效果、随机确定中奖格子以及在合适的时机停止闪烁并显示中奖结果。

具体代码解释

html：

		<div class="nine_box">
			<div class="nine prize1">
				鱼香肉丝盖饭
			</div>
			<div class="nine prize2">
				咖喱鸡丁盖饭
			</div>
			<div class="nine prize3">
				麻辣拌
			</div>
			<div class="nine prize4">
				麻辣烫
			</div>
			<div class="nine prize5">
				炒饼丝
			</div>
			<div class="nine prize6">
				聚一下
			</div>
			<div class="nine prize7">
				宫保鸡丁盖饭
			</div>
			<div class="nine prize8">
				香辣面
			</div>
			<div class="nine click" onclick="prize_whirl()">
				点击抽奖
			</div>
		</div>
		
		<script src="js/nine_draw.js">
		</script>

 HTML 代码构建了抽奖页面的基本结构，包含一个nine_box容器，内部有九个div元素，分别代表不同的奖品格子和抽奖按钮。利用不同的类名来进行修改，通过onclick属性为抽奖按钮绑定了点击函数，当按钮被点击时，将触发函数。

css：

* {
				margin: 0;
				padding: 0;
			}

			.nine_box {
				width: 36%;
				height: 460px;
				padding: 1% 1% 0% 1%;
				/* display: flex; */
				justify-content: space-around;
				flex-wrap: wrap;
				background-color: aquamarine;
				margin-top: 60px;
				margin-left: 30%;
				position: relative;
			}

			.nine {
				width: 30%;
				height: 30%;
				text-align: center;
				line-height: 140px;
				background-color: pink;
				border-radius: 5px;
			}

			.prize1 {
				position: absolute;
				top: 3%;
				left: 3%;
			}

			.prize2 {
				position: absolute;
				top: 3%;
				left: 35%;
			}

			.prize3 {
				position: absolute;
				top: 3%;
				left: 67%;
			}
			.prize4{
				position: absolute;
				top: 35%;
				right: 3%;
			}
			.prize5{
				position: absolute;
				top: 67%;
				right: 3%;
			}
			.prize6{
				position: absolute;
				top: 67%;
				right: 35%;
			}
			.prize7{
				position: absolute;
				top: 67%;
				left: 3%;
			}
			.prize8{
				position: absolute;
				top: 35%;
				left: 3%;
			}
			.click{
				position: absolute;
				top: 35%;
				left: 35%;
				background-color: crimson;
				border-radius: 5px;
				border: 1px solid lightblue;
			}

1. 使用width和height属性控制格子的大小。例如，nine_box设置了width: 36%和height: 460px，每个奖品格子nine设置了width: 30%和height: 30%，确保整体布局协调。
2. 通过background-color属性设置背景色，如nine_box的背景色为aquamarine，奖品格子的背景色为pink，抽奖按钮的背景色为crimson，增强视觉区分度。同时，利用border-radius属性设置圆角，border属性设置边框样式，提升界面美观度。
3. 采用position: absolute对每个格子进行绝对定位，精确指定它们在容器中的位置。也方便奖品顺时针来进行转圈，例如，prize1位于左上角（top: 3%; left: 3%），prize2位于其右侧（top: 3%; left: 35%）等。通过这种方式，实现了九宫格的布局效果。

js：

// 获取点击按钮
let click = document.getElementsByClassName('click')[0];
let timing;
let count;
let index;
let time = 500;
let prize = document.getElementsByClassName('nine');
let randoms;

// 点击之后的函数
function prize_whirl() {
	count = 0;
	index = 0;
	timing = setInterval(set_timing, time);
	// console.log(index);
	prize[index].style.backgroundColor = 'crimson';
	click.onclick = null;
	randoms = Math.floor(Math.random() * prize.length);
	console.log(randoms);
}

// 定时器的函数
function set_timing() {
	index++;
	// console.log(index);
	// console.log(prize.length - 2);
	if (index == prize.length - 1) {
		index = 0;
		count++;
		prize[index].style.backgroundColor = 'crimson';
		prize[prize.length - 2].style.backgroundColor = 'pink';
	} else {
		prize[index].style.backgroundColor = 'crimson';
		prize[index - 1].style.backgroundColor = 'pink';
	}
	if (count < 4) {
		time -= 100;
		if (time <= 100) {
			time = 100;
		}
	} else if (count > 5) {
		time += 100;
		if (time >= 1000) {
			time = 1000;
		}
	}
	clearInterval(timing);
	timing = setInterval(set_timing, time);
	if (count > 6 && index == randoms) {
		clearInterval(timing);
		setTimeout(function() {
			alert(prize[index].innerText);
			prize[index].style.backgroundColor = 'pink';
			click.onclick = prize_whirl;
		}, 50);
	}
}

• 变量初始化：
  • click：获取抽奖按钮元素。
  • timing：作为定时器的名字，方便后续控制定时器。
  • count：记录抽奖过程中的循环次数
  • index：格子的索引值（下标）。
  • time：定时器的间隔时间，初始值为 500 毫秒，随着抽奖进度调整。
  • prize：获取所有奖品格子元素的集合。
  • randoms：用于存储随机数。
• prize_whirl函数（点击抽奖后）：
  • 初始化count和index为 0。
  • 使用setInterval启动定时器，每隔time毫秒调用一次set_timing函数，开始格子的变色
  • 将初始格子（索引为 0）的背景颜色设置为crimson，突出显示。
  • 通过click.onclick = null;取消抽奖按钮的点击事件，防止重复点击。
  • 使用Math.random()和Math.floor()生成一个随机的整数，也就是抽到的具体奖品的下标。
• set_timing函数（定时器中的函数）：
  • index自增，指向下一个要变色的格子。
  • 当index达到奖品格子数量减 1 时，将index重置为 0，并增加count。同时，将当前索引为 0 的格子背景色设置为crimson，将上一个循环中最后一个闪烁的格子（索引为prize.length - 2）背景色恢复为pink。
  • 在其他情况下，将当前索引index对应的格子背景色设置为crimson，将上一个索引index - 1对应的格子背景色恢复为pink，实现格子的依次闪烁效果。
  • 根据count的值动态调整time：当count小于 4 时，每次循环将time减少 100 毫秒，加快变色速度；当count大于 5 时，每次循环将time增加 100 毫秒，减慢变色速度。达到闪烁的效果，（时间可以依照自己的想法设置，进行更改）。
  • 每次循环都先清除当前的定时器，再重新设置一个新的定时器，以应用更新后的time值。
  • 当count大于 6 且当前index等于randoms时，意味着抽奖结果已确定。此时，清除定时器，使用setTimeout延迟 50 毫秒后弹出中奖提示框，显示中奖格子的奖品内容（通过prize[index].innerText获取），将中奖格子的背景色恢复为pink，并重新为抽奖按钮绑定prize_whirl函数，允许用户再次抽奖。

以上就是整个九宫格抽奖的过程，有想法的大家可以在评论区和我进行讨论。