同学们上课都有被老师随机点名点到的尽力吧,今天就给大家看一下是如何做到随机点名的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#active{
width: 300px;
height: 300px;
border: 1px solid red;
border-radius: 50%;
background-color: #F1F1F1;
font-size: 30px;
line-height: 300px;
text-align: center;
margin: 0 auto 20px;
color: red;
}
button{
display: block;
width: 200px;
height: 50px;
font-size: 30px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="active">等待抽取学员</div>
<button id="btn">开始</button>
<script type="text/javascript">
var _active=document.querySelector("#active");
var _btn=document.querySelector("#btn");
var k;
_btn.onclick=function(){
var c=_btn.innerText;
if(c=="开始"){
_btn.innerText="结束";
k=setInterval(function(){
var a=Math.ceil(Math.random()*66)+01;
if(a<10){
a="0"+a;
}
_active.innerHTML=a;
},100)
}
if(c=="结束"){
_btn.innerText="开始";
clearInterval(k);
}
}
</script>
</body>
</html>
每次点一下开始都能够随机抽取一个幸运儿