点击开始,利用定时器实现div背景颜色的动态变化,详细代码如下:
<!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>Document</title>
<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: 30px;
font-weight: bold;
}
#start {
cursor: pointer;
background-color: pink;
}
</style>
</head>
<body>
<div id="fa">
<div class="option">仓井老师</div>
<div class="option">波多老师</div>
<div class="option">武藤老师</div>
<div class="option">小泽老师</div>
<div id="start">开始抽奖</div>
<div class="option">相泽南</div>
<div class="option">三上悠亚</div>
<div class="option">桥本有才</div>
<div class="option">泷泽老师</div>
</div>
<script>
// 逻辑:1.点击开始,触发一个定时器
// 2.定时器内部,随机一个数,通过这个数来获取 奖品所在的元素
// 3.必须设置一个时间点,停止定时器
let but = document.getElementById('start');
let options = document.getElementsByClassName('option');//获得div,option数组
let timer = null;//定义变量解决,多次点击,创建多个定时器问题
but.onclick = function () {
// 设置一个初始值 作为时间判断,判断是否停止计时器
let num = 0;
// 1.触发一个定时器
if (timer == null) {//判断timer是否为空,为空的话创建定时器
timer = setInterval(() => {
num++;
// 2.随机 0-7的数,通过数组下标获取具体选中的元素
//Math.round(Math.random()*(y-x)+x)获取x-y之间的随机数 Math.round()把数四设五入为最接近的整数
let ran = Math.round(Math.random() * (7 - 0) + 0);
// 3.1 把所有的元素都恢复原来样式
for (let i = 0; i < options.length; i++) {
options[i].style.backgroundColor = '#fff';//恢复原来的白色
}
// 3.2 给选中元素 添加样式(背景颜色)
options[ran].style.backgroundColor = 'orange';
// 4.给定时器设置有效时间,停止定时器
if (num >= 50) { // 50代表的是 终止数字
clearInterval(timer);//停止计时器
timer = null;
}
}, 100);
}
}
</script>
</body>
</html>
结果:
点击开始抽奖,会动态变化: