<!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{
display: flex;
justify-content: center;
}
div{
width: 300px;
height: 300px;
background-color: beige;
text-align: center;
border: 1px solid grey;
}
</style>
</head>
<body>
<div >
<p>王得</p>
<button class="start">开始</button>
<button class="end"> 结束</button>
</div>
</body>
<script>
const arr = ['陈听','陈雪燕','王德','法娃']
const p = document.querySelector('p')
const start = document.querySelector('.start')
const end = document.querySelector('.end')
end.disabled = true;
let randomnum = 0;
let si = 0
const begin = function(){
si = setInterval(function(){
randomnum = Math.floor(Math.random() * arr.length)
p.innerHTML = arr[randomnum];
start.disabled = true;
end.disabled = false;
},50)};
start.addEventListener('click', begin,)
end.addEventListener('click',
function(){
clearInterval(si);
start.disabled = false
arr.splice(randomnum,1);
if(arr.length ===0){
start.disabled = end.disabled = true;
}
end.disabled = true;
}
)
</script>
</html>