先看效果图

实现原理

• 生成所有名字数值范围内的随机数，每一个数字就代表每个人名的索引
• 所有名字保存在一个一维数组arr内，生成某个数字n后把当前的数字n传给对应的arr[n],修改它的背景色
• 定时器的开启来实现动态的跳动选择，每次点击开始按钮要判断定时器是否开启，若开启则关闭清空

废话不说😏上代码

结构和样式

 <!-- HTML结构 -->
 <div class="wrapper">
    <!-- 标题部分 -->
    <h1 style="text-align: center;">***标题自拟***</h1>
    <!-- 
     每一个名字就是一个li
     -->
    <ul class="box">
    </ul>
    <div class="click">
      <!-- 按钮：开始和停止按钮 -->
      <button class="start">开始/停止</button>
    </div>
  </div>

 /* css样式 */
  body {
    background-color: rgb(204, 195, 195);
  }

  /* 点名器主界面 */
  .wrapper {
    margin: 100px auto;
    border: 1px solid #ddd;
    width: 1500px;
    text-align: center;
    position: relative;
  }

  /* 包裹所有li的容器 */
  .box {
    width: 1000px;
    margin: 0 auto;
  }

  /* 每个li的样式 */
  .box li {
    vertical-align: top;
    display: inline-block;
    width: 100px;
    height: 50px;
    border: 2px solid rgb(92, 147, 163);
    border-radius: 15px;
    text-align: center;
    line-height: 50px;
    margin: 5px;
  }

  /* 按钮样式 */
  .wrapper button {
    border: none;
    width: 100px;
    height: 50px;
    border-radius: 10px;
    cursor: pointer;
    outline: none;
    margin-top: 20px;
    font-weight: bolder;
    color: rgb(30, 17, 209);
    background: #eee;
    box-shadow: 0 15px 30px rgb(0 0 0 / 15%);
    transition: all .5s;
  }

  .wrapper button {
    display: inline-block;
  }

  .wrapper .click:hover button {
    color: #eedf10;
  }

js样式

 /*js部分*/
 //准备数据
    var nameString = new String(
      "小橘子,白勇太,恩佐,伊莲,妲己,蔡文姬,董卓,曹操,孙尚香,诸葛亮,司马懿,司马昭,刘备,刘婵,关羽,张飞,许褚,项羽,刘邦,雅典娜,赵信,亚瑟,嬴政,刘彻"
    );
    // 获取ul，存名字的父类
    var box = document.querySelector(".box")
    //获取开始/停止的按钮
    var start = document.querySelector(".start");
    //将数据字符串按照逗号为间隔变成一个数组
    var arr = nameString.split(",")
    //遍历数组，将数组中每一个元素前后加上li标签。
    var str = "";/*str保存内容和标签*/
    for (var i = 0; i < arr.length; i++) {
      str += `<li>${arr[i]}</li>`
    }
    // 讲保存的内容和标签插入box中（将所有li以及li中的内容保存到ul中）
    box.innerHTML = str;
    //保存上一次幸运同学的下标。
    var last_index = 0;
    // 保存定时器的ID
    var timer = null;
    start.onclick = function () {
      //已经开启了定时器，则点击start按钮，表示关闭，反之，表示开启定时器。
      //如何判断是否开启了定时器？  判断是否有这个定时器的ID
      if (timer) {
        //定时器已经开启了，我们需要关闭
        clearInterval(timer)
        //将timer的值清空
        timer = null;
      } else {
        //定时器没有开启，我们需要开启
        timer = setInterval(function () {
          //生成随机数，作为索引去找对应的学生
          var index = getRandom(0, arr.length - 1);
          //获取所有的li标签。
          var lis = document.querySelectorAll("ul.box>li");
          //在生成新的幸运同学之前，需要将之前的幸运同学的颜色去掉
          lis[last_index].style.backgroundColor = "";
          //给新的同学加上颜色
          lis[index].style.backgroundColor = "green";
          //将新同学的下标赋值给 last_index
          last_index = index;
        }, 20)
      }
    }
    //用于生成n~m之间的随机数
    function getRandom(n, m) {
      return Math.floor(Math.random() * (m - n + 1) + n);
    }