实现简单的点名操作

运用定时器setInterval()，随机函数parseInt(Math.random() * name.length)，点击事件实现start.addEventListener('click', function () {}实现简单的点击操作。

HTML部分

 <p>这里显示名字</p>
  <button class="start">开始随机点名</button>
  <button class="end">结束随机点名</button>

获取标签

获取标签，声明数组数据

//获取标签
    let p = document.querySelector('p')
    let start = document.querySelector('.start')
    let end = document.querySelector('.end')
    let name = ['饺子', '煲仔饭', '木桶饭', '汤饭', '黄焖鸡', '不吃了']

开始点击事件

 //注意作用域问题，要在外面声明
    let num, arr
    //开始点击事件
    start.addEventListener('click', function () {
      //定时器
      arr = setInterval(function () {
        //取随机数
        num = parseInt(Math.random() * name.length)
        // 输出数据
        let numes = name[num]
        p.innerText = numes
      }, 1000)
    })

效果如下：

结束点击事件

删除上一个出现的元素，避免重复，无元素时禁用按钮(不禁用，继续点名会出现undefinder)

 //结束点击事件
    end.addEventListener('click', function () {
      //停止定时器
      clearInterval(arr)
      // 删除出现的元素
      name.splice(num, 1)
      //无元素时，禁用按钮
      if (name.length === 0) {
        start.disabled = true

      }
    })

效果如下：

不能实现的功能

如果直接的点击结束按钮会使，数组中的数据删除，下次点击开始，会直接出现undefined

连续点击，会出现计时器叠加

js实现简单的随机点名