JavaScript点名应用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_58235030/article/details/124790862

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      .form{
        width: 150px;
        height: 150px;
        margin: 0 auto;

      }
      .text{
        width: 150px;
        height: 120px;
        background-color: #e4d2f8;
        border-radius: 10px 10px 0 0;
        font-size: 25px;
        line-height: 120px;
        text-align: center;
      }
      button{
        width: 150px;
        height: 30px;
        border: none;
        background-color: #a7d4ff;
        border-radius: 0 0 10px 10px;
      }
      button:hover{
          background-color: #44baff;
      }
  </style>
</head>
<body>

  <div class="form">
    <div class="text">
        点击按钮点名
    </div>
    <button value="begin">开始</button>
  </div>

<script>
  var stus = ['蔡政', '曹鹏宇', '陈海龙', '凤娇', '郭海昆', '郭锦歌', '金宇', '孔晨阳',
      '李梦影', '梁露露', '梁夏玲', '刘锦程', '刘强强', '陆鹏飞', '马森', '盛少将', '田子怡', '王方方',
      '王金松', '王静文', '王永兴', '韦晨阳', '武梦宇', '熊康', '徐倩', '杨付海', '姚杰', '张博翔', '张菲菲',
      '张凤娇', '张孟杰', '张梦婷', '张润泽', '张志霖', '赵阳', '周欢', '施成'];
  var time;
  var random;
  var btn = document.querySelector("button");

  btn.onclick = function (){
    if ("begin" == btn.value){
       time = window.setInterval(()=>{
           random = parseInt(Math.random() * stus.length);
           document.querySelector(".text").innerText = stus[random];
       },100);
       this.innerHTML = "停止";
       this.value = "end";
    }else{
       window.clearInterval(time);
       this.value = "begin";
       this.innerHTML = "开始";
       stus.splice(random,1);
    }
    if (stus.length == 0){
      this.disabled = true;
      document.body.firstElementChild.lastElementChild.innerHTML = "点名完毕";
    }
  }
</script>
</body>
</html>

随机点名进阶版