js实现随机点名

需求：

分为上下两个部分，上方为显示区域，下方为控制区域。显示区域显示基地所有成员的工号和姓名，控制区域由开始和结束两个按钮组成。点击开始按钮，显示区域里的内容开始滚动，点击结束按钮，内容滚动停止，随机显示一位成员的工号和姓名。

实现原理：

对抽取对象整体添加一个数组，每一个抽取对象都有对应的索引值，随机数random乘上数组长度，向下取整，运用间隔定时器，随机获得索引值，然后用innerHTML添加到标签内即可

代码：

<h1 class="h1">姓名学号</h1>
  <button id="btn1">开始</button>
  <button id="btn2">停止</button>
  <script>
    var h1 = document.querySelector('.h1')
    var btn1 = document.querySelector('#btn1')
    var btn2 = document.querySelector('#btn2')
    var arr = ["梁克锦02010102","骆文浩02010103","方海英02010104","廖玉洁02010105","张震宇02010106","李炫宇02010107","李舜禹02010108","李建民02010109","佟冠衡02010110","李奥02010111","颜宏鑫02010112","卢盛泽02010113","鲁飞洋02010114","李俊达02010115","李成基02010116","金昊02010117"]
    var timer = null
    btn1.onclick = function () {
      timer = setInterval(() => {
        h1.innerHTML = arr[Math.floor(Math.random() * arr.length)]//因为索引值从0开始，所以0~1随机数乘length然后向下取整进行索引
      }, 50);
    }
    btn2.onclick = function () {
        clearInterval(timer)
    }

QQ视频20230111224211