RANDOM：轻松教你用JS实现随机点名案例

技术分享菌

已于 2023-11-18 12:10:23 修改

阅读量2.6k

点赞数 7

分类专栏： HTML/CSS/JavaScrip 前端文章标签： javascript 开发语言 ecmascript

于 2023-11-16 23:59:17 首次发布

本文链接：https://blog.csdn.net/m0_55392280/article/details/134452975

版权

前端同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

HTML/CSS/JavaScrip

3 篇文章 0 订阅

订阅专栏

博主主页：技术分享菌

博主简介：专注于前端开发领域，旨在帮助初学者提升前端技能水平，分享技术资讯和实用教程。内容涵盖 HTML、CSS、JavaScript、前端框架（如 React、Vue、Angular 等）以及前端工程化等方面。我们将不断更新优质内容，为大家提供一场前端技术的盛宴，欢迎你的关注和参与。

文章目录

前言

随机点名 是应用于教育、培训、会议等场合的互动工具，在实际的开发过程中也是经常使用，通过随机选取参与者发言、回答问题或参与活动，使得整个过程更加公平、有趣和活跃。

一、随机点名是什么？

随机点名 是一种公平、公正的选择参与者参与活动、发言或回答问题的方法。它可以通过软件或实体工具实现，使每个参与者都有相同的机会被选中。

二、功能实现

1.页面效果图

2.HTML部分

代码如下（示例）：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
</head>

<body>
    <div class="box">
        <h2>随机点名</h2>
        <div class="content">
            <span>名字是：</span>
            <div class="qs">幸运嘉宾</div>
        </div>
        <div class="btns">
            <button class="start">开始</button>
            <button class="end">结束</button>
        </div>
    </div>
</body>

</html>

3. CSS部分

代码如下（示例）：

* {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        .box {
            margin: 100px auto;
            padding: 50px;
            width: 600px;
            background-color: rgb(156, 3, 3);
            background-image: url(./festival.jpg);
            background-position: center;
            background-size: cover;
            border: 5px solid gold;
            border-radius: 5px;
        }

        .content {
            display: flex;
            margin: 50px auto;
            width: 600px;
            font-size: 25px;
            text-align: center;
            line-height: 40px;
            color: goldenrod;
        }
        .content span {
            padding: 10px 0;
        }
        .qs {
            padding: 10px;
            width: 450px;
            height: 40px;
            background-color: #000;
            color: gold;
        }
        .btns {
            text-align: center;
        }

        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }

4.JavaScrip部分

代码如下（示例）：

// 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞','曹操','孙权']
        // 业务1. 开始按钮模块
        // 定时器全局变量
        let timeId = 0
        // 随机号全局变量
        let random = 0
        // 1.1 获取姓名区域对象
        const uname = document.querySelector('.qs')
        // 1.2 获取开始按钮对象
        const start_btn = document.querySelector('.btns .start')
        // 1.3 添加点击事件
        start_btn.addEventListener('click', function () {
            // 开启定时器
            timeId = setInterval(function () {
                // 随机数
                random = Math.floor(Math.random() * arr.length)
                // console.log(arr[random]);
                uname.innerHTML = arr[random]
            }, 50)
            // 点击开始按钮，禁用开始按钮
            start_btn.disabled = true
            // 如果数组里面只有一个值、不需要抽取，直接禁用开始、结束按钮
            if (arr.length === 1) {
                // start_btn.disabled = true
                // end_btn.disabled = true
                start_btn.disabled = end_btn.disabled = true
            }
        })
        // 业务2. 结束按钮模块
        // 2.1 获取结束按钮对象
        const end_btn = document.querySelector('.btns .end')
        // 2.2 添加点击事件
        end_btn.addEventListener('click', function () {
            // 点击结束按钮，启用开始按钮
            start_btn.disabled = false
            // 关闭定时器
            clearInterval(timeId)
            // 结束，删除抽到的对应数组元素
            arr.splice(random, 1)
        })

JS业务模块主要分为两个模块：开始按钮模块、结束按钮模块

当我们做案例主要是先分析业务逻辑，再进行代码功能的编写

随机点名 主要是通过点击事件，获取随机数作为数组的下标，然后通过点击开始按钮，开启定时器，点击结束按钮关闭定时器

下面是随机点击的注意点：

定时器的变量、随机数的变量是全局变量

当抽取到最后一个数据的时候，两个按钮同时禁用

不然继续抽就会出现 undefined

点击结束按钮删除数组当前抽取的一个数据下次就不抽到，保证公平性

当点击开始按钮就需要给开始按钮禁用掉，点击结束按钮启用开始按钮

如果不进行禁用，用点击开始按钮，再次点击开始按钮就会出现bug

5.整体代码

代码如下（示例）：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        .box {
            margin: 100px auto;
            padding: 50px;
            width: 600px;
            background-color: rgb(156, 3, 3);
            background-image: url(./festival.jpg);
            background-position: center;
            background-size: cover;
            border: 5px solid gold;
            border-radius: 5px;
        }

        .content {
            display: flex;
            margin: 50px auto;
            width: 600px;
            font-size: 25px;
            text-align: center;
            line-height: 40px;
            color: goldenrod;
        }
        .content span {
            padding: 10px 0;
        }
        .qs {
            padding: 10px;
            width: 450px;
            height: 40px;
            background-color: #000;
            color: gold;
        }
        .btns {
            text-align: center;
        }

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

<body>
    <div class="box">
        <h2>随机点名</h2>
        <div class="content">
            <span>名字是：</span>
            <div class="qs">幸运嘉宾</div>
        </div>
        <div class="btns">
            <button class="start">开始</button>
            <button class="end">结束</button>
        </div>
    </div>
    <script>
        // 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞','曹操','孙权']
        // 业务1. 开始按钮模块
        // 定时器全局变量
        let timeId = 0
        // 随机号全局变量
        let random = 0
        // 1.1 获取姓名区域对象
        const uname = document.querySelector('.qs')
        // 1.2 获取开始按钮对象
        const start_btn = document.querySelector('.btns .start')
        // 1.3 添加点击事件
        start_btn.addEventListener('click', function () {
            // 开启定时器
            timeId = setInterval(function () {
                // 随机数
                random = Math.floor(Math.random() * arr.length)
                // console.log(arr[random]);
                uname.innerHTML = arr[random]
            }, 50)
            // 点击开始按钮，禁用开始按钮
            start_btn.disabled = true
            // 如果数组里面只有一个值、不需要抽取，直接禁用开始、结束按钮
            if (arr.length === 1) {
                // start_btn.disabled = true
                // end_btn.disabled = true
                start_btn.disabled = end_btn.disabled = true
            }
        })
        // 业务2. 结束按钮模块
        // 2.1 获取结束按钮对象
        const end_btn = document.querySelector('.btns .end')
        // 2.2 添加点击事件
        end_btn.addEventListener('click', function () {
            // 点击结束按钮，启用开始按钮
            start_btn.disabled = false
            // 关闭定时器
            clearInterval(timeId)
            console.log(arr[random]);
            // 结束，删除抽到的对应数组元素
            arr.splice(random, 1)
            console.log(arr);
        })
    </script>
</body>

</html>