javaScript随机点名

约 459 字大约 2 分钟

javascript

2025-06-11

js随机点名效果

一个比较好玩的随机点名，或者说随机问题，随机。。。。

数组里面存放的数据不同，叫法就不一样，本案例是随机点名案例。

js随机点名介绍

初始化效果

点击开始效果：

名字数组里抽完了以后效果：

html+css+javaScript代码

<!DOCTYPE html>
<html lang="zh-CN">
<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>随机点名</title>
    <style>
        span{
            display: inline-block;
            width: 200px;
            height: 40px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 40px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <p>
        名字是: <span>开始随机点名</span>
    </p>
    <button id="start">开始</button>
    <button id="end">结束</button>
    <script>
        // 随机函数
        function getRandoms(min,max){
            return Math.floor(Math.random()*(max-min+1))+min;
        }

        let arr = ['张三','李四','王五','赵六','许七分'];
        // 获取框
        let span = document.querySelector('span');
        // 获取开始按钮
        let start = document.querySelector('#start');
        // 获取结束按钮
        let end = document.querySelector('#end');
        // random也是全局变量
        let random = 0;
        // 改变span内容函数
        function changeName(){
            // 随机数
            random = getRandoms(0,arr.length -1)
            span.innerHTML = arr[random];
        }
        // timestart必须是全局变量，不然，停止不了定时器
        let timeStart = 0;
        //监听开始按钮
        start.addEventListener('click',function(){
            timeStart = setInterval(changeName,30); 
            if(arr.length===1){
                start.disabled=true;
                end.disabled=true;
            }  
        })
        // 监听结束按钮
        end.addEventListener('click',function(){
            clearInterval(timeStart);
            // 点完名后要删除
            arr.splice(random,1);
        })
    </script>
</body>
</html>

版权所有

版权归属：许七分

许可证：署名 4.0 国际 (CC-BY-4.0)