本文详细介绍如何使用 JavaScript 实现一个简单的九宫格抽奖功能。内容涵盖 HTML 结构搭建、CSS 样式布局以及核心 JS 逻辑实现，包括通过定时器控制抽奖动画、随机生成中奖结果以及停止机制。适合前端初学者参考学习。
九宫格抽奖功能概述
本文分享了一个使用 JavaScript 编写的简单九宫格抽奖示例代码，供读者参考学习。
页面结构
HTML 页面结构
<body>
<div id="fa">
<div class="option">1</div>
<div class="option">5</div>
<div class="option">3</div>
<div class="option">4</div>
<div id="start">开始抽奖</div>
<div class="option">5</div>
<div class="option">6</div>
<div class="option">7</div>
<div class="option">8</div>
</div>
</body>CSS 样式设计
CSS 样式布局
<style>
#fa {
width: 600px;
height: 600px;
border: 1px solid red;
}
#fa>div {
width: 33%;
height: 33%;
border: 1px solid red;
float: left;
line-height: 200px;
text-align: center;//文本居中
font-size: 40px;
font-weight: 800;//加粗字体
}
#start {
cursor: pointer;//使鼠标移入时出现小手图标
background-color: pink;
}
</style>JavaScript 抽奖逻辑实现
核心逻辑分析如下：
1. 当用户点击中间的“开始抽奖”按钮时，触发一个定时器。2. 在定时器执行过程中，随机生成一个数字，利用该数字定位到当前高亮的奖区元素。3. 设定一个结束条件（如次数或时间），当满足条件时清除定时器，从而停止抽奖动画。
JavaScript 核心逻辑
<script>
let btn = document.getElementById('start');//获取到开始抽奖按钮
let options = document.getElementsByClassName('option');//获取到8个奖区
let timer =null;//防止定时器多次触发，初始值设为null
//为btn绑定一个单击事件
btn.onclick = function () {
//设置一个初始值 作为时间判断
let num = 0;
if (timer == null) {
//触发一个定时器
timer = setInterval(function () {
num++;
//随机产生一个0 - 7 的数字 通过该数字作为数组的下标来获取到div
let ran = Math.round(Math.random() * (7 - 0) + 0);
//round是因为Math.random() * (7 - 0) + 0)取出的随机数是含小数的一串数字，所以需要取整
//改变选中的元素背景颜色之前，将所有元素的背景颜色恢复
for (let i = 0; i < options.length; i++) {
options[i].style.backgroundColor = '';
}
//给选中的元素设置一个背景颜色
options[ran].style.backgroundColor = 'tomato';
//给定时器一个时间，到时间停止定时器
if(num == 5){
clearInterval(timer)
}
}, 1000)
}
}
</script>运行效果展示
以上就是本文的全部内容，希望这个示例能对读者的学习有所帮助，也欢迎大家继续支持本站。