<!DOCTYPE html>
<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>随机点名</title>
<style>
#name{
width: 300px;
height: 200px;
border: 2px solid black;
margin: auto;
line-height: 200px;
text-align: center;
font-size: 50px;
}
.button{
width: 300px;
height: 100px;
margin: auto;
}
#but{
width: 300px;
height: 100px;
font-size: 40px;
}
</style>
</head>
<body><br><br><br><br>
<div id="name">准备喽～</div>
<div class="button">
<input type="button" value="开始" id="but">
</div>
<script>
let name = document.getElementById("name")
let but = document.getElementById("but")
let claccname = ["1","2","3","4","5","6","7","8"]
let i = 0;
let jishi;
but.onclick = function(){
if (i == 0) {
name.style.color = "black"
but.value = "结束"
jishi = setInterval(()=>{
let id = Math.round(Math.random()*(claccname.length-1));
if(id == 1){
id = 1+1
}
name.innerHTML = (claccname[id]);
},1)
i = 1;
} else {
but.value = "开始"
name.style.color = "red"
clearInterval(jishi);
i = 0
}
}
</script>
</body>
</html>