vue3-ts-rabbit---hefei-27
/
点名.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>点名系统</title>
    <style type="text/css">
      * {
        font-family: '微软雅黑';
        /*transition-duration: ;*/
      }

      h1,
      h2 {
        animation: changeColor 2s linear infinite;
        animation-direction: alternate;
      }

      h1 {
        background-color: yellowgreen;
        color: white;
        text-align: center;
      }

      #content > div {
        float: left;
        width: 100px;
        height: 50px;
        margin: 5px;
        font-size: 20px;
        line-height: 50px;
        text-align: center;
      }

      .cell {
        background-color: black;
        color: white;
      }

      .cell.active {
        background-color: skyblue;
        color: crimson;
      }

      .selected {
        background-color: skyblue;
        color: crimson;
      }

      .current,
      .a {
        background-color: greenyellow;
        color: blueviolet;
      }

      button {
        display: inline-block;
        height: 50px;
        /*width: 50px;*/
        background-color: yellowgreen;
        color: white;
        font-size: 16px;
        margin: 10px;
      }

      select {
        display: inline-block;
        height: 30px;
        width: 100px;
        border: 1px solid yellowgreen;
        background-color: blanchedalmond;
        color: black;
        font-size: 14px;
        margin: 10px;
      }

      @keyframes changeColor {
        from {
          color: pink;
        }

        to {
          color: blueviolet;
        }
      }
    </style>
  </head>

  <body>
    <h1>点名系统</h1>
    <h2 id="selectTitle">被选中的小伙伴：<span></span></h2>
    <button>开始</button>

    <div id="content">
      <!-- <div class="cell"></div> -->
    </div>

    <script>
      /*

    */
      const arr =
        `景建飞 张文程 蒋健 王琪 李杰 李俊康 代洋洋 吕顺凡 周顺 武岩 武耀威 王杰 汪有智 燕磊 陈盼盼 赵鹏程 袁旺 曹前超 杨贵山 陈源远 蒲瞻 喻书恒 高崇 李旺平 胡涛 王金昭 王正元 陈龙 陈智恒 汪堃 桂俊辉 朱媛 孙睿 王猛 潘冬 杨思佳 许宸豪 刘聪 马超 程彬 陈安川 程森 李宁 洪秀 时国龙 陈余 蒋朝 王晨至 尹康 盛江生 罗慧祥 王建 郭莹 许良 陶诚伟 黄时敏 王静静 陈珊珊 章锦霞 王家俊 沈梦 丁慧颖`.split(
          ' '
        );
      let btn = document.querySelector('button'); //开始按钮
      let divs = document.getElementById('content'); //父级div盒子
      let h2 = document.getElementById('selectTitle'); //被选中人员
      contens();
      let cell = document.querySelectorAll('.cell'); //获取生成的所有名字
      cell = domToArr(cell); //把伪数组转换成数据使用splice
      // 设置按钮点击开始执行事件
      btn.addEventListener('click', function () {
        for (let i = 0; i < 1; i++) {
          btn.disabled = true;
          let sui;
          let Times = setInterval(function () {
            let nts = document.querySelector('div.active');
            console.log(nts);
            if (nts) {
              nts.classList.remove('active');
            }
            sui = parseInt(Math.random() * cell.length);
            cell[sui].classList.add('active');
          }, 100);
          setTimeout(function () {
            clearInterval(Times);
            h2.innerText += ' @' + arr[sui];
            cell[sui].classList.add('selected');
            arr.splice(sui, 1);
            cell.splice(sui, 1);
            btn.disabled = false;
            if (arr.length == 0) {
              btn.disabled = true;
            }
          }, 2000);
        }
      });

      function contens() {
        let str = ``;
        arr.forEach(function (item, index) {
          // let element = arr[item]
          str += `<div class="cell">${arr[index]}</div>`;
          // let divNew = document.createElement('div')
          // divNew.classList.add('cell')
          // divNew.innerHTML = `${arr[index]}`
          // divs.appendChild(divNew);
          console.log(arr[index]);
        });
        divs.innerHTML = str;
        // console.log(html);
      }

      //把伪数组转换成数组
      function domToArr(domList) {
        // 定义一个空数组
        let arr = [];
        // 对伪数组 进行遍历
        for (let index = 0; index < domList.length; index++) {
          arr.push(domList[index]); // 把dom元素取出来 装到真正的数组中
        }
        return arr;
      }
    </script>
  </body>
</html>