JS案例学习——随机点名案例

co0ker

已于 2023-02-28 22:20:33 修改

阅读量2.6k

点赞数

文章标签：学习 javascript

于 2023-02-28 22:04:04 首次发布

本文链接：https://blog.csdn.net/weixin_57385603/article/details/129270296

版权

该文章介绍了一个使用JavaScript编写的随机点名系统，包括开始、结束和重置功能。系统通过点击开始按钮随机抽取数组中的名字并显示，结束按钮删除已抽取的名字，当数组为空时禁用开始和结束按钮，重置按钮恢复初始状态。文章强调了代码的维护性和避免无限循环的重要性。

摘要由CSDN通过智能技术生成

随机点名案例，如图所示：

一、业务分析

①点击开始按钮随机抽取数组中的一个数据，放在页面中

②点击结束按钮删除数组当前抽取的一个数据

③当抽取到最后一个数据的时候，开始和结束两个按钮同时禁用

④点击重置按钮后，数组恢复，开始和结束两个按钮允许使用

二、核心分析

①利用定时器快速展示，停止定时器结束展示

②按钮监听事件

三、代码实现

①点击开始按钮随机抽取数组中的一个数据，放在页面中，步骤如下：

a. 获取显示区域对象和开始按钮对象

b. 添加点击事件

// 1.1 获取开始按钮对象
const start = document.querySelector('.start')
// 获取显示区域对象
const qs = document.querySelector('.qs')
// 1.2 添加点击事件
start.addEventListener('click', function () {
    timeId = setInterval(function() {
        // 随机数
        random = parseInt(Math.random() * arr.length)
        qs.innerHTML = arr[random]
    }, 35)
})

②点击结束按钮删除数组当前抽取的一个数据

③当抽取到最后一个数据的时候，开始和结束两个按钮同时禁用

a. 获取结束按钮模块

b. 添加点击事件

// 2. 结束按钮模块
const end = document.querySelector('.end')
end.addEventListener('click', function() {
    clearInterval(timeId)
    // 结束了，可以删除掉当前抽取的那个数组元素
    arr.splice(random, 1)
    // 如果数组长度为0，则开始和结束按钮禁止点击
    if(arr.length === 0) {
        start.disabled = true
        end.disabled = true
    }
})

④点击重置按钮后，数组恢复，开始和结束两个按钮允许使用

a. 获取重置按钮模块

b. 添加点击事件

// 3. 重置按钮模块
const restart = document.querySelector('.restart')
restart.addEventListener('click', function () {
    // 恢复数组
    arr = ['甲', '乙', '丙', '丁', '戊']
    // 按钮恢复点击
    start.disabled = false
    end.disabled = false
})

四、完整代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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;
        }
        
        .restart {
            display: block;
            width: 120px;
            height: 35px;
            margin: 20px auto;
        }
    </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>
        <button class="restart">重置</button>
    <script>
        /* 
            随机点名案例
            业务分析：
                ①点击开始按钮随机抽取数组中的一个数据，放到页面中
                ②点击结束按钮删除数组当前抽取的一个数据
                ③当抽取到最后一个数据的时候，两个按钮同时禁用(写点开始里面，只剩最后一个数据不用抽了)
                核心：利用定时器快速展示，停止定时器结束展示
        */
        // 数据数组
        let arr = ['甲', '乙', '丙', '丁', '戊']
        // 定时器的全局变量
        let timerId = 0
        // 随机号要全局变量
        let random = 0
        // 业务1，开始按钮模块
        
        // 1.1 获取开始按钮对象
        const start = document.querySelector('.start')
        // 获取显示区域对象
        const qs = document.querySelector('.qs')
        // 1.2 添加点击事件
        start.addEventListener('click', function () {
            timeId = setInterval(function() {
                // 随机数
                random = parseInt(Math.random() * arr.length)
                qs.innerHTML = arr[random]
            }, 35)
        })

        // 2. 结束按钮模块
        const end = document.querySelector('.end')
        end.addEventListener('click', function() {
            clearInterval(timeId)
            // 结束了，可以删除掉当前抽取的那个数组元素
            arr.splice(random, 1)
            // 如果数组长度为0，则开始和结束按钮禁止点击
            if(arr.length === 0) {
                start.disabled = true
                end.disabled = true
            }
        })

        // 3. 重置按钮模块
        const restart = document.querySelector('.restart')
        restart.addEventListener('click', function () {
            // 恢复数组
            arr = ['甲', '乙', '丙', '丁', '戊']
            // 按钮恢复点击
            start.disabled = false
            end.disabled = false
        })
        

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

五、效果展示

①初始页面