效果图
代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习：随机点名</title><style>div {margin: 50px auto;width: 500px;height: 300px;border: 3px solid #ccc;text-align: center;}div p {margin: 50px;font-size: 50px;color: red;}div button {margin: 20px;width: 90px;height: 40px;}</style>
</head><body><div><h2>随机点名</h2><p>？？？</p><button class="start">开始</button><button class="end" disabled>结束</button></div><script>const arr = ['张三', '李四', '王五', '赵六', '冯七']const start = document.querySelector(".start")const end = document.querySelector(".end")const p = document.querySelector("p")let alter = 0let num = 0start.addEventListener("click", () => {alter = setInterval(() => {num = Math.floor(Math.random() * arr.length)p.innerText = arr[num]}, 25)start.disabled = trueend.disabled = false})end.addEventListener("click", () => {clearInterval(alter)arr.splice(num, 1)if (arr.length === 1) {start.disabled = trueend.disabled = true} else {end.disabled = truestart.disabled = false}})</script>
</body></html>
