HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>点名</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- 标题 -->
<h1 class="title">随机点名</h1>
<!-- 开始暂停按钮 -->
<p class="tba">
<button class="btn">点名</button>
</p>
<!-- 存姓名的地方 -->
<ul class="list">
</ul>
<script src="js/js.js"></script>
</body>
</html>
css部分
body,ul,li{
margin: 0;
padding: 0;
list-style-type: none;
}
.title{
text-align: center;
}
.tba{
text-align: center;
}
.btn{
padding: 10px 20px;
cursor: pointer;
}
.list{
margin: 0 auto;
width: 1000px;
border: 1px solid skyblue;
text-align: center;
}
.list li{
display: inline-block;
width: 110px;
height: 45px;
border-radius: 10px;
margin: 10px;
color: aliceblue;
line-height: 45px;
text-align: center;
background-color: #337ab7;
}
.list li.active{
background: green;
box-shadow: 4px 4px 4px #666;
}
.list li.end{
background: red;
box-shadow: 4px 4px 4px #666;
}
js部分
//模拟后台传过来的数据
var arr = ["鲁班七号","鲁班七号","鲁班七号","鲁班七号","鲁班七号","鲁班七号",
"鲁班七号","鲁班七号","鲁班七号","鲁班七号","鲁班七号","鲁班七号","鲁班七号",
"鲁班七号","鲁班七号","鲁班七号","鲁班七号","鲁班七号","鲁班七号","鲁班七号",
"鲁班七号","鲁班七号","鲁班七号","鲁班七号","鲁班七号","鲁班七号","鲁班七号","鲁班七号"];
var arrLen = arr.length; //遍历arr的数组
//获取
var oList = document.getElementsByClassName('list')[0];
var oBtn = document.getElementsByClassName('btn')[0];
var timer;
var index;
// 循环遍历产生带数据的li标签
function init() {
var str = '';
// 循环遍历产生li
arr.forEach(function (ele,index){
str +='<li>' + ele + '</li>';
});
oList.innerHTML = str;
}
init();
var flag = false;
// 点击事件
oBtn.onclick =function() {
if( document.getElementsByClassName('end')[0]) {
document.getElementsByClassName('end')[0].className = '';
}
flag = !flag;
if(flag){
oBtn.innerHTML = '停止';
timer = setInterval(function() {
randomName();
},100)
}else{
clearInterval(timer);
oBtn.innerHTML = '点名';
}
};
function randomName() {
// 产生随机数
index = Math.floor(Math.random()*arrLen);
// 测试代码
console.log(index);
if(document.getElementsByClassName('active')[0]){
document.getElementsByClassName('active')[0].className = '';
}
oList.getElementsByTagName('li')[index].className = 'active';
}