JS：随机点名综合案例

最新推荐文章于 2025-09-30 11:12:45 发布

原创最新推荐文章于 2025-09-30 11:12:45 发布 · 775 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

文章描述了一个使用JavaScript和HTML实现的随机点名功能，包括随机抽取不重复的名字、定时更新显示、以及在只剩一人时自动结束的功能。

需求：

1、随机点名

2、不能重复出现已经被抽取的名字

3、当剩下最后一个人的名字时不再抽取

部分html代码：

<!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>

 
</body>

</html>

JavaScript部分代码：

 <script>
    // 点击开始按钮随机抽取数组的一个数据，放到页面中
    // 点击结束按钮删除数组当前抽取的一个数据
    // 当抽取到最后一个数据的时候，两个按钮同时禁用，（写点开始里面，只剩最后一个数据不用抽了）
    // 核心：利用定时器快速展示，停止定时器结束展示

    const nameArr = ['zhang', 'liu', 'li', 'zhao']
    // 业务1开始按钮模块
    const qs = document.querySelector('.qs')
    const start = document.querySelector('.start')
    let n = 0
    let random = 0
    // 添加点击事件
    start.addEventListener('click', function () {
      // 随机数

      n = setInterval(function () {
        random = parseInt(Math.random() * nameArr.length)
        qs.innerHTML = nameArr[random]
      }, 50)

      // 如果数组里面只剩一个元素就不用再开始了
      if (nameArr.length === 1) {
        start.disabled = true
        end.disabled = true

      }

    })
    //获取结束按钮
    const end = document.querySelector('.end')


    end.addEventListener('click', function () {
      clearInterval(n)//删除定时器
      nameArr.splice(random, 1)//已经被抽到的名字删掉
    })

  </script>