简易html随机选人

style部分

    <style>
      .disbtn {
        opacity: 0.6;
        pointer-events: none;
      }
      .box{
        height: 20px;
        margin: 10px 0;
      }
    </style>

body部分、

    <!-- 选人 -->
    <div class="box">
      <span class="person"></span>
      <span class="person"></span>
      <span class="person"></span>
    </div>
    <div>
      <button onclick="randomperson()" id="btn">随机选人</button>
    </div>

js部分

//   随机选人
      let persons = document.querySelectorAll(".person");
      let btn = document.getElementById("btn");
      function randomperson() {
        console.log(btn);
        btn.className = "disbtn";
        var personArr = [
          "刘",
          "张",
          "王",
          "宋",
          "李",
          "向",
          "曹",
          "吴",
          "郭",
          "唐",
          "田",
          "陈",
        ];
        var seped = 1;
        var poersonNum = 0;
        var randomNo;
        var newpersonArr = personArr;
        for (let index = 0; index < persons.length; index++) {
          persons[index].innerHTML = "";
         let timer = setInterval(() => {
            seped++;
            randomNo = Math.round(Math.random() * (newpersonArr.length - 1)); //选择随机人员
            if ( poersonNum < persons.length && poersonNum == index) { //从第一个随机滚动开始
                persons[index].innerHTML = newpersonArr[randomNo];
            }
            if (seped == 200 * (poersonNum + 1) && poersonNum < persons.length) { //依次添加人员
              persons[poersonNum].innerHTML = newpersonArr[randomNo];
              let local = newpersonArr.indexOf(newpersonArr[randomNo]); // 删除已选中得人员
              newpersonArr.splice(local, 1);
              poersonNum++;
            }
            if (poersonNum >= persons.length) {
              clearInterval(timer);
              poersonNum++;
              btn.className = "";
            }
          }, 50);
        }
      }

简易html+css+js随机选人小案例参考，欢迎各位大佬给出代码优化建议

代码效果

1703482239719