<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>
*{
padding: 0;
margin: 0;
}
div{
width: 110px;
margin: 100px auto;
text-align: center;
}
div>span{
display: block;
width: 100px;
height: 30px;
border: 1px solid #999;
text-align: center;
}
button{
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<span>????</span>
<button>开始点名</button>
</div>
<script>
var but = document.querySelector('button');
var sp = document.querySelector('span');
var arr = ['张三','李四','王五','李二狗','狗剩','柱子','张飞','关羽','开飞机的舒克','开坦克的贝塔'];
var flag=false;
var num = 0 ;
but.addEventListener('click',function(){
flag=!flag
if(flag){
num = setInterval(function(){
var index = Math.floor(Math.random()*(arr.length-1));
sp.innerHTML=arr[index];
},50)
but.innerHTML='暂停';
}else{
clearInterval(num);
but.innerHTML='开始';
}
})
</script>
</body>
</html>
</script>