HTML+CSS+JavaScript：随机点名案例

最新推荐文章于 2024-04-19 16:15:52 发布

早八睡不醒午觉睡不够的程序猿

最新推荐文章于 2024-04-19 16:15:52 发布

阅读量1k

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/lbcbjtlhmjq/article/details/132075964

版权

一、需求

1、点击开始按钮，姓名随机切换

2、点击结束按钮，姓名停止切换，此时显示的姓名即为被抽中者

3、同一个人不能被重复抽中

二、代码素材

以下是缺失JS部分的代码，感兴趣的小伙伴可以先自己试着写一写

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

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

        .box {
            position: relative;
            box-sizing: border-box;
            margin: 50px auto;
            border: 2px solid #ccc;
            padding: 20px;
            width: 500px;
            height: 200px;
            text-align: center;
        }

        .box h3 {
            line-height: 75px;
        }

        .box button {
            position: absolute;
            bottom: 30px;
            width: 60px;
            height: 30px;
        }

        .box .start {
            left: 130px;
        }

        .box .over {
            right: 130px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>随机点名</h2>
        <h3>姓名：马嘉祺</h3>
        <button class="start">开始</button>
        <button class="over">结束</button>
    </div>
    <script>
        const arr = ['马嘉祺', '丁程鑫', '宋亚轩', '严浩翔', '刘耀文', '贺峻霖', '张真源']

    </script>
</body>

</html>

三、算法思路

算法思路非常简单，就是分别为开始按钮和结束按钮绑定点击事件，然后触发开始按钮就开启定时器，触发结束按钮就终止定时器，就这么简单……

四、完整代码

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

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

        .box {
            position: relative;
            box-sizing: border-box;
            margin: 50px auto;
            border: 2px solid #ccc;
            padding: 20px;
            width: 500px;
            height: 200px;
            text-align: center;
        }

        .box h3 {
            line-height: 75px;
        }

        .box button {
            position: absolute;
            bottom: 30px;
            width: 60px;
            height: 30px;
        }

        .box .start {
            left: 130px;
        }

        .box .over {
            right: 130px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>随机点名</h2>
        <h3>姓名：马嘉祺</h3>
        <button class="start">开始</button>
        <button class="over">结束</button>
    </div>
    <script>
        const arr = ['马嘉祺', '丁程鑫', '宋亚轩', '严浩翔', '刘耀文', '贺峻霖', '张真源']

        const h3 = document.querySelector('.box h3')
        const start = document.querySelector('.start')
        const over = document.querySelector('.over')

        let timer

        let rand

        start.addEventListener('click', () => {
            start.disabled = 1
            over.disabled = 0
            timer = setInterval(() => {
                rand = Math.floor(Math.random() * arr.length)
                h3.innerHTML = `姓名：${arr[rand]}`
            }, 100);
        })

        over.addEventListener('click', () => {
            start.disabled = 0
            over.disabled = 1
            clearInterval(timer)
            //数组长度为 1 时，禁用按钮
            if (arr.length === 1)
                start.disabled = over.disabled = 1
            else
                arr.splice(rand, 1)
        })

    </script>
</body>

</html>