思路：
1.获取元素
2.为开始按钮添加单击事件，开启定时器，获取一个随机索引号，根据索引号生成对应名字，再把名字渲染到页面中
3.为结束按钮添加单击事件，关闭定时器，删除元素（拿到一个名字便删掉一个名字），最后判断数组长度是否为0，为0时禁用开始按钮
注意：这里定时器的句柄和随机索引号要声明在外面（全局变量），因为开始按钮和结束按钮是两个不同的函数，会有作用域问题（函数内部无法直接使用另外一个函数内部声明的成员，函数内部可以使用函数外部的成员）
<p>这里显示名字</p>
<button class="start">开始随机点名</button>
<button class="end">结束随机点名</button>
<script>
// 名字数据
let arrName = ['张三', '李四', '王五', '赵六', '周七']
// 获取元素
let start = document.querySelector('.start')
let end = document.querySelector('.end')
let p = document.querySelector('p') //渲染元素
let timeId, index //定时器句柄，要在外面（全局变量）函数作用域问题
//单击开始按钮事件
start.addEventListener('click', function () {
//生成定时器
timeId = setInterval(function () {
// 随机获取一个索引号
index = parseInt(Math.random() * arrName.length)
//根据索引号生成对应的名字
let name = arrName[index]
// 把名字渲染到页面内容p标签里面
p.innerText = name
}, 100)
})
//单击结束按钮事件
// 函数作用域问题
// 函数内部无法直接使用另外一个函数内部声明的成员
// 函数内部可以使用函数外部的成员
end.addEventListener('click', function () {
// 关闭定时器
clearInterval(timeId)
//删除元素 ，拿到一个名字删除一个名字
arrName.splice(index, 1)
// 判断数组是否长度为0，为0时禁用开始按钮
if (arrName.length === 0) {
start.disabled = true
}
})
</script>
