JS随机点名案例

优质学生

已于 2024-04-22 16:45:09 修改

阅读量215

点赞数 3

文章标签： javascript 前端 css

于 2024-04-22 16:40:24 首次发布

本文链接：https://blog.csdn.net/2301_79223755/article/details/138082401

版权

pink老师 APls Day2

思路：

创建一个数组容纳随机姓名
运用random随机函数获得一个随机值，且随机值不重复
将随机值对应的姓名进行本文更换
按钮与定时器的关闭
数量与按钮的关闭

<!DOCTYPE html>
<html lang="zh-CN">
<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 {
            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: 30px;
            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>
        const arr = ['黄忠', '张三', '李四', '王五', '张飞', '关羽', '赵云', '孙策']
        //在外面声明定时器的全局变量
        let timerId = 0
        let random = 0
        const qs = document.querySelector('.qs')
        // 1.1获取开始按钮
        const start = document.querySelector('.start')
        // 1.2添加点击事件
        start.addEventListener('click', function(){
            //局部变量，出函数不可使用
            timerId = setInterval(function(){
                //生成一个随机数
            random = parseInt(Math.random() * arr.length)
            // console.log(random)
            // console.log(arr[random])
            // 将获取的随机数对应的随机姓名进行文本更换
            qs.innerHTML = arr[random]
        }, 35)

        //如果数组 中只剩下一个值，禁用两个按钮
        if (arr.length === 1) {
            // start.disabled = true  //禁用
            // end.disabled = false
            start.disabled = end.disabled = true
        }
    })
        // 2.点击按钮关闭定时器
        const end = document.querySelector('.end')
        end.addEventListener('click', function() {
            // console.log('1234')
            clearInterval(timerId)
            //删除当前抽取的元素
            arr.splice(random, 1)
            console.log(arr)
        })
    </script>
</body>
</html>