使用定时器实现随机点名
1、模拟数据，准备一个名字数组
2、获取元素
3、给元素绑定事件，并开启定时器
3.1开启定时器需要获取一个随机数当做数组的索引值
3.2获取到数据就渲染到页面的指定位置
4、点击关闭定时器
4.1为了反之重复出现同一个数据，所以点击关闭定时器要删除获取的数据
4.2如果数组里面的元素都没有了，应该把按钮禁用，不然会出现undefined
代码实现：
html部分
<p>名字</p>
<button class="start">开始随机点名</button>
<button class="end">结束随机点名</button>
css部分
p {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
font-weight: 700;
border: 1px solid red;
color: #6cf;
}
js部分
// 模拟数据
let names = ['张三', '李四', '王五', '陈六', '老七']
// 获取p标签
let p = document.querySelector('p')
//获取开始按钮
let start = document.querySelector('.start')
//获取结束按钮
let end = document.querySelector('.end')
//定义一个句柄变量和随机数变量，方便使用
let timeId, index
// 开始点击事件
start.addEventListener('click', function() {
// 开启定时器
timeId = setInterval(function() {
// 获取一个随机数
index = parseInt(Math.random() * names.length)
let name = names[index]
// 渲染
p.innerText = name
}, 10)
})
// 结束点击事件
end.addEventListener('click', function() {
// 关闭定时器
clearInterval(timeId)
// 删除随机的名字
names.splice(index, 1)
// 当数组长度为0，禁用按钮
if (names.length === 0) {
start.disabled = true
end.disabled = true
}
})
