随机点名
- 不结束前,名字随机切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color:#DDA0DD; //背景色
}
#d{
width: 100%;
height: 80px;
}
#d1{
width: 300px;
height: 200px;
background-color: moccasin;
border-radius: 50px; //边框圆角 50px圆的弧度
font-size: 50px;
}
input{
width: 100px;
height: 50px;
font-size: 20px;
color:brown;
background-color: darkseagreen;
}
#d2{
width: 10px;
}
</style>
</head>
<body>
<hr>
<div align="center">
<div id="d"></div>
<div id="d1">
<br>
<label id="a"> </label>
</div>
<div>
<br>
<input type="button" onclick="sleep()" value="开始">
//空格
            
<input type="button" id="i2" value="结束">
</div>
</div>
<br>
<br>
<br>
<hr>
</body>
<script>
var a=document.getElementById("a");
var i2=document.getElementById("i2");
let name;
let l=["张三","李四","王五","赵六"];
function sleep(){
flag=true;
setTimeout(change,50);
}
i2.onclick=function(){
flag=false;
}
function change(){
name = l[Math.floor(Math.random()*l.length)];
console.log(name);
if(!flag){
a.innerHTML=name;
}else{
a.innerHTML=name;
sleep();
}
}
</script>
</html>