JavaScript实现九宫格抽奖功能的示例代码
时间：2022-06-12 09:35:38 | 栏目：JavaScript代码 | 点击：次
效果图
话不多说，直接上效果：
实现流程
主要流程为：
1. 根据效果图，构建静态页面
2. 获取元素(自带的属性)
3. 绑定事件
4. 事件触发之后
4.1 所有的li元素 在指定的时间间隔下 颜色随机变化
4.2 延时器 2秒后 清除定时器
4.3 在清除定时器之后,所有的li背景色复位,随机选一个
主要代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽奖</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 240px;
margin: 30px auto;
border: 1px solid #ccc;
}
ul li {
width: 60px;
height: 60px;
line-height: 30px;
text-align: center;
margin: 10px;
float: left;
background-color: orange;
color: white;
}
/* 清浮动 */
ul:after {
content: "";
display: block;
clear: both;
}
p {
margin: 20px auto;
text-align: center;
}
.btn {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: none;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>礼品1</li>
<li>礼品2</li>
<li>礼品3</li>
<li>礼品4</li>
<li>礼品5</li>
<li>礼品6</li>
<li>礼品7</li>
<li>礼品8</li>
<li>礼品9</li>
</ul>
<p><button onclick="alert(123)" title="按钮">开始抽奖</button></p>
</div>
</body>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.className = "btn";
// 通过标签名 获取元素
var lis = document.getElementsByTagName("li");
// 为元素绑定单击事件
btn.onclick = function () {
// 禁用按钮
btn.disabled = true;
var timer = setInterval(function () {
for (var i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = getColor();
}
}, 100);
// 使用延时器 清除定时器
setTimeout(function (){
clearInterval(timer)
for (var i = 0; i < lis.length; i++) {
lis[i].style.backgroundColor = "orange"
}
var index = Math.floor( Math.random() * lis.length )
lis[index].style.backgroundColor = "red";
// 启用按钮
btn.disabled = false;
}, 2000)
}
// 随机颜色的函数
function getColor() {
return "#" + Math.random().toString(16).substr(2, 6);
}
</script>
</html>