随机点名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机抽奖</title>
<style>
*{margin:0;padding: 0;}
#wrap{
width: 31.25rem;
height: 18.75rem;
border:0.0625rem solid red;
border-radius: 5%;
margin:0 auto;
}
#titi{
width: 200px;
height: 3.125rem;
background: green;
margin:0 auto;
margin-top: 5.0rem;
color: #fff;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 50px;
}
#btn{
width: 80px;
height: 30px;
display: block;
margin:0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="titi">随机点名</div>
<button id="btn">开始</button>
</div>
<script>
var Btn=document.getElementById('btn');
var Tit=document.getElementById('titi');
// 定义变量接收定时器的标志
var T=0;
// 定义标志位 标志开始还是结束
var Bz= false;
var arr=['张三','李四','王五','张伟','李明','萌萌','赵四'];
// 绑定单击事件
Btn.onclick=function(){
if(Bz==false){
Btn.innerHTML='停止';
T=setInterval(function(){
// 调用随机函数
var index=rund(0,arr.length-1);
Tit.innerHTML=arr[index];
},50);
Bz= true;
}else{
Btn.innerHTML='开始';
// 清除定时器
clearInterval(T);
Bz=false;
}
}
// 封装随机值的函数
function rund(m,n){
return Math.floor(Math.random()*(n-m+1))+m;
}
</script>
</body>
</html>
