随机点名实现```js 被选中的小伙伴们: 开始 - 1 + ```随机点名实现随机点名实现随机点名实现先

<!-- 
  核心部分 在于css选择器！！  not 取反 选择器  div:not(.active)


  1 给按钮绑定点击事件 
    1 开启定时器
      先移除选中了的 li.active 身上的active
      随机给li标签设置 active类
    2 一段时间过后，要清除定时器 
      1 最后选中的li标签 添加 select 类 
      2 获取被选中的同学，把它的名字显示在h1标签上 

    3 还是会出现重复选中的问题
      原因 
      1 因为我们一直都是在 完整的li标签 中来随机抽取同学 
      2 思考，能不能 在抽中同学后，排除掉这个同学，然后在剩下的li标签数组中来抽取
        获取到一个数组 不包含 select 类名的li标签 
  
 -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>09-点名系统-实现方式2</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      padding: 20px;
    }

    h1 {
      padding: 10px;
      background-color: #12d4d4;
      color: purple;
      margin: 10px 0;
    }

    button {
      width: 100px;
      height: 50px;
      border-radius: 25px;
      background-color: #23b4e0;
      color: #fff;
      border: none;
      font-size: 20px;
    }

    ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
    }

    li {
      width: 100px;
      height: 40px;
      background-color: #000;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
    }

    .active {
      background-color: #9acd32;
      color: #fff;
    }

    .select {
      background-color: palevioletred;
      color: #fff;
    }


    /* 没有active类的div */
    /* div:not(.active) {
        font-size: 100px;
      } */
  </style>
</head>

<body>
  <h1>被选中的小伙伴们:</h1>
  <button>开始</button>
  <div>
    <button>-</button>
    <button>1</button>
    <button>+</button>
  </div>
  <ul></ul>

  <script>
    let div = document.querySelector('div')
    div.addEventListener('click', function (e) {
      console.log(e.target);
    })
    const arr = `陈培琪 
邓祥威 
方泽基 
郭武汉 
贺淘星 
黄贵斌 
黄华松 
黄仁杰 
赖泽赢 
梁志斌 
刘玉轩 
梁子聪 
刘雅琴 
欧阳家铭 
彭伟维 
邱浩畅 
饶定洲 
邵将 
陶子路 
汪煜博 
王鹏 
王自选 
文荣桩 
谢骐蔚 
张家铷 
郑鸿生 
马紫欣 
周儒浩 
邓堪锦 
王锦双 
何富铖 
罗健贤 
陈结源 
倪金辉 
张祖勇 
黄浩钊 
付宇洋 
苏铭轩 
叶海民 
李振林 
李文俊 
吴海波 
郭倩仪 
温玉秋 
陈颂文 
徐志军 
肖甜 
许龙辉 
杨秀鸿 
李树昆 
夏一鸣 
冯隆义 
陆天豪 
王汉亮 
黄圣飞 
曾玉萍 
吴卓龙 
王翠玲 
林仪 
史溢炜 
廖蓝飞 
吴士钊 
张澎 
黎开宙 
覃启娴 
吴栩然 
宋炜 
覃雄智 
李龙章 
曹外 
郭宇 
阳赐林 
王宗坤 
杨凯文 
范明健 
韦嘉敏 
郝璐 
韦家祥 
廖东 
曾锐华 
康梅飞 
何冠儒`.split(' ');
    const ul = document.querySelector('ul');
    const h1 = document.querySelector('h1');
    render();
    let lis = document.querySelectorAll('li'); // 完整的li标签

    const button = document.querySelector('button');

    button.addEventListener('click', function () {
      let randomIndex;
      let unSelectLis;
      const timeId = setInterval(function () {
        // 要拿没有select类的标签做筛选
        unSelectLis = document.querySelectorAll('li:not(.select)');

        // 先获取以前选中了的active li 移除它身上的active
        const beforeActive = document.querySelector('li.active');
        if (beforeActive) {
          beforeActive.classList.remove('active');
        }

        // 随机数 不要拿完整的li标签做筛选 要拿没有select类的标签做筛选
        randomIndex = Math.round(Math.random() * (unSelectLis.length - 1));
        unSelectLis[randomIndex].classList.add('active');
      }, 300);

      setTimeout(function () {
        clearInterval(timeId);
        // 根据下标 设置最终选中的同学
        unSelectLis[randomIndex].classList.add('select');
        // 获取到上述的随机数
        h1.innerText += ` ` + unSelectLis[randomIndex].innerText;
      }, 3000);
    });

    function render() {
      let html = ``;
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        html += `<li>${arr[index]}</li>`;
      }
      ul.innerHTML = html;
    }
  </script>

  <script src="6669.js"></script>
</body>

</html>
随机点名 实现

随机点名实现
