js 随机点名

J-Henry52

已于 2022-05-07 17:34:12 修改

阅读量1.7k

点赞数 2

分类专栏：随机点名文章标签： javascript html 前端

于 2022-05-07 17:24:11 首次发布

本文链接：https://blog.csdn.net/qq_43124006/article/details/124635429

版权

随机点名专栏收录该内容

1 篇文章 0 订阅

订阅专栏

点名功能

1.点击开始开始随机数组里的名字

2.点击结束随机结束并且开始按钮禁用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      h2 {
        text-align: center;
      }

      .box {
        width: 600px;
        margin: 50px auto;
        display: flex;
        font-size: 25px;
        line-height: 40px;
      }

      .qs {
        width: 450px;
        height: 40px;
        color: red;
      }

      .btns {
        text-align: center;
      }

      .btns button {
        width: 120px;
        height: 35px;
        margin: 0 50px;
      }
    </style>
  </head>

  <body>
    <h2>随机点名</h2>
    <div class="box">
      <span>名字是：</span>
      <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
      <button class="start">开始</button>
      <button class="end">结束</button>
    </div>

    <script>
      // 开始和结束都有事件, div改内容
      // 1. 有数据-数组
      let arr = ["小明", "小红", "小绿", "小王", "大王", "老王"];

      // 2. 查找所需要的标签
      let qs =document.querySelector(".qs")
      let start = document.querySelector(".start")
      let end = document.querySelector(".end")
      // 定时器是一个对象, 没有数据的时候存储null,保证到指定的内存空间
      // 对象-堆
     let timer
    

      // 全局变量, 删除的时候使用end事件
     
      // 3. 注册事件: 开始; 结束
      start.addEventListener("click",function(){
                console.log("点击按钮");
                //创建定时器 生成一个随机值  
                timer=setInterval(function () {
                  let key = Math.floor(Math.random()*arr.length)
                  qs.innerHTML=arr[key]
                  // 当开始按钮被点击时   按钮不可以点击
                  start.disabled = true;
                    
                },30)
               

      })
      // 给结束按钮 添加事件
      end.addEventListener("click",function(){
      
                console.log("结束...");
             
                // 结束定时器
                clearInterval(timer)
                start.disabled=false


      })
        // console.log('开始按钮')
        // 开启定时器: 每隔一段时间修改div的内容
      
          // 如果是最后一个了, 按钮禁用
          // if (arr.length === 0) {
          //   start.disabled = true;
          // }

          // console.log(11)
          // 随机取一个人名放到div里面
          // 1. 计算一个随机数: num应该是全局变量, end按钮的函数要按照这个num删除数据
    
          // console.log(num)

          // 2. div放数据: 随机数当做索引值取出的人名
       
       

        // console.log('结束')
        // 关闭定时器; 把数组中抽中的这个人删除
       

   
    </script>
  </body>
</html>

结果如下：