JavaScript实现随机点名

圆脸脸lxj

于 2023-01-31 14:17:41 发布

阅读量1.2k

点赞数 2

分类专栏： HTML 网页设计文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/yuan_xiangjun/article/details/128816669

版权

HTML 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

网页设计

11 篇文章 0 订阅

订阅专栏

原理：

界面展示一个显示姓名的div,开始点名按钮和结束点名按钮。

点击一个按钮通过一个随机数组函数和定时器每隔50毫秒变换一次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 1200px;
            height: 500px;
            font-size: 180px;
            border: 1px solid rgb(126, 123, 120);
            background-color:rgb(0, 148, 0);
            text-align: center;
            line-height: 500px;
            margin: 100px auto;
			color: white;
			
        }
        button {
            width: 250px;
            height: 80px;
            text-align: center;
            line-height: 30px;
			font-size: 40px;
			margin: 0px 60px;
			
        }

        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div>开始点名！</div>
    <p>
        <button id="start">点名开始</button>
        <button id="end">点名结束</button>
    </p>
</body>
<script>
    // 获取元素
    var box = document.querySelector('div');
    var btn_start = document.querySelector('#start');
    var btn_end = document.querySelector('#end');
    var timer;
    //名字数组
    let arr = ['冰雪', '夏雪', '梓涵', '春梅', '萌白', '慕云', '南晴', '念兰', '凝香', '平汤', '若轩', '书惠', '雪亦'];
    // 生成随机名字
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    // 开始
    btn_start.addEventListener('click', function () {
        //防止多点
        clearInterval(timer)
        timer=setInterval(()=>{
            let random = getRandom(0, arr.length - 1);
            box.innerHTML = arr[random];
        },50)
    })
    // 结束
    btn_end.addEventListener('click', function () {
        clearInterval(timer)
    })
</script>
</html>

效果图：