话不多说,间接上成果:
次要流程为:
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>