<!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>* {margin: 0;padding: 0;}h2 {text-align: center;}.box {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.qs {width: 450px;height: 40px;color: red;}.btns {text-align: center;}.btns button {width: 120px;height: 35px;margin: 0 50px;}</style>
</head><body><h2>随机点名</h2><div class="box"><span>名字是：</span><div class="qs">这里显示姓名</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><script>// 数据数组const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']// 定时器的全局变量 let timerID = 0// 随机数的全局变量let random = 0// 业务一:开启按钮模块const qs = document.querySelector('.qs')// 1.1 获取开始按钮对象const start = document.querySelector('.start')// 1.2添加点击事件start.addEventListener('click', function () {timerID = setInterval(function () {// 随机数const random = Math.floor(Math.random() * arr.length)qs.innerHTML = arr[random]}, 35)// 当数组只有一个值的时候，禁用两个按钮if (arr.length === 1) {start.disabled = trueend.disabled = true}})// 2.关闭按钮模块const end = document.querySelector('.end')end.addEventListener('click', function () {clearInterval(timerID)// 结束了，删除当前抽取的元素arr.splice(random, 1)console.log(arr)})</script>
</body></html>
