九宫格如何制作

1、比如找8个自己喜欢出的水果和棒棒糖之类的，找到自己喜欢的就行。他们是通过子绝父相来设置的，下面是html部分：

<div class="big_box"><!-- 大盒子 -->
			<div class="wife">送一个老婆</div>
			<div class="banana">香蕉一根</div>
			<div class="pear">梨一个</div>
			<div class="back_inversion">倒贴200</div>
			<div class="grape">葡萄一串</div>
			<div class="peach">桃一个</div>
			<div class="cuke">黄瓜一根</div>
			<div class="dogshit">一泡狗屎</div>
		</div>
		<div class="lotto">
			<div>点击抽奖</div>
		</div>

2、下面是js的代码：

// 随机抽动
let big_box = document.getElementsByClassName('big_box')[0];
// 获取big_box里的所有的div元素
let prizes = big_box.getElementsByTagName('div');
// 获取到抽奖按钮，后续绑定点击事件
let lotto = document.getElementsByClassName('lotto')[0];
// 获取点击抽奖的按钮
let mask_layer = document.getElementsByClassName('mask_layer')[0];
// 获取遮罩层
let popup_frame = document.getElementsByClassName('popup_frame')[0];
// 获取弹窗框架
let content = document.getElementsByClassName('content')[0];
// 获取弹窗内容
let button = document.getElementsByClassName('button')[0];
let time = 20;
// 旋转时间间隔
let inter;
// 存定时器  给定时器声明一个名字
let glint_count;
// 闪烁的和  
// 获取确定按钮
let flicker = 0;
//闪动次数

lotto.onclick = function() {
	//给点击抽奖绑定点击事件
	flicker = 0;
	// 闪一次加一
	lotto.style.backgroundColor = '#90EE90';
	// 禁止点击背景颜色
	lotto.innerHTML = '禁止点击';
	// 点击抽奖后隐藏
	lotto.onclick = null;
	// 取消点击事件绑定
	glint_count = Math.floor(Math.random() * 100 + 1) + 100;
	// 设置一个100-200之间的随机整数 抽到的圈数
	inter = setInterval(auto_glint, 20);
	// 设置一个永久定时器间隔200毫秒执行一次auto_glint函数
}

function auto_glint() {
	// 给函数命名 方便删除/创建定时器
	flicker++; // 调用一次auto_glint就会加一次
	let nextIndex = Math.floor(Math.random() * prizes.length);
	// 随机选择下一个要变色显示的奖品索引（不按顺序）
	//prizes.length 后再取整，确保随机数在奖品的索引范围内。

	for (let i = 0; i < prizes.length; i++) {
		// 记录当前奖品索引，用于后面恢复原色
		prizes[i].style.backgroundColor = 'aqua';
		// 原来的颜色
	}

	// 当前索引下标变红
	prizes[nextIndex].style.backgroundColor = 'yellow';
	// 闪到那个那个变色
	if (flicker == glint_count) {
		// 判断是否达到目标圈数
		clearInterval(inter);
		// 清除定时器奖品闪烁
		popup_frame.style.display = 'block';
		// 显示弹出窗
		content.innerHTML = '您中奖的内容是：' + prizes[nextIndex].innerHTML;
		// 获取中奖的内容
		content.style = 'color:#606266'
		// 选种奖品后的字体颜色
		mask_layer.style = "display:block";
		// 选种奖品后弹窗显示
		lotto.innerHTML = '点击抽奖';
	}

}

function shut() {
	//关闭弹出窗事件
	mask_layer.style.display = 'none';
	// 点击确定关闭弹出窗
	lotto.style.backgroundColor = 'red';
	// // 换成原来的颜色
	lotto.style.display = 'block';
	// 点击后显示 抽奖
	lotto.style = 'text-align:center';
	// 字体居中
	lotto.onclick = function() {
		// 重新绑定抽奖逻辑
		flicker = 0;
		// 闪一次加一
		lotto.innerHTML = '禁止点击';
		// 点击抽奖后隐藏
		lotto.onclick = null; 
		// 禁止点击
		glint_count = Math.floor(Math.random() * 100 + 1) + 100;
		// 设置一个100-200之间的随机整数 抽到的圈数
		inter = setInterval(auto_glint, 20);
		// 设置一个永久定时器间隔200毫秒执行一次auto_glint函数
		lotto.style.backgroundColor = '#90EE90';
		// 点击抽奖后变回绿色
	}
}

效果图如下：



js每行代码如何使用的都有注释，欢迎大家不懂的来评论区私信