代码:
<!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>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 600px;
margin: 0 auto;
}
ul>li {
float: left;
width: 150px;
height: 150px;
text-align: center;
line-height: 150px;
background-color: skyblue;
margin-top: 10px;
margin-left: 10px;
font-size: 20px;
color: white;
}
.ac {
background-color: gray;
}
</style>
</head>
<body>
<ul>
<li class="ac">100优惠券</li>
<li>200优惠券</li>
<li>300优惠券</li>
<li>400优惠券</li>
<li><button>开始</button><button>暂停</button></li>
<li>600优惠券</li>
<li>700优惠券</li>
<li>800优惠券</li>
<li>900优惠券</li>
</ul>
</body>
</html>
<script>
//获取开始和暂停按钮
var btn = document.getElementsByTagName('button');
//获取li
var li = document.querySelectorAll('li');
//把所有li 的下标放在数组中
var arr = [0, 1, 2, 5, 8, 7, 6, 3];
//定时器
var timer = null;
//num 表示arr中的初始下标
var num = 0;
//开始
btn[0].onclick = function () {
//放置定时器叠加,并清除
clearInterval(timer);
timer = setInterval(function () {
for (var i = 0; i < arr.length; i++) {
//利用循环将所有li中的类名变为空
li[arr[i]].className = '';
}
//大于7时转完一圈,让他重新从第一个开始
if (num > 7) {
num = 0;
}
li[arr[num]].className = 'ac';
num++;
}, 300);
}
//结束
btn[1].onclick = function () {
clearInterval(timer);
alert('恭喜你获得' + li[arr[num]].innerHTML);
}
</script>