点名器

最新推荐文章于 2024-02-28 19:40:05 发布

我又懂了

最新推荐文章于 2024-02-28 19:40:05 发布

阅读量1.1k

点赞数 2

分类专栏： Js

本文链接：https://blog.csdn.net/qq_39194067/article/details/103556232

版权

Js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

点名器的思路是随机获取到指定数组中的姓名字符串，点击显示框开始随机出现姓名，点击停止按钮时停止并得到随机的姓名。
随机产生：使用 random 乘以数组长度减一再取整即可得到数组index的随机数。Math.round(Math.random() * (yname.length - 1));
点击开始旧让定时器进行重复循环，快速给出不同的姓名。
停止点名：清除定时器即可
出现的问题：当我们重复点击多次定时器让其开始时发现定时器只能清除一个，所以我们需要每次点击开始按钮都只能执行一次，当flag为true才可以循环，点击后flag为false，无法重复执行即可。
下面时完整的代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 50px;
            font-size: 18;
            font-weight: 900;
            line-height: 50px;
            text-align: center;
            border: 1px solid black;
            border-radius: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div>开始点名</div>
    <button>停止点名</button>
    <script>
       var yname = ['胡歌','张杰','刘亦菲','卢本伟','朱迅','蔡徐坤','王嘉儒','杨幂','热巴','娜扎']
       console.log(yname.length);

        var div = document.getElementsByTagName('div')[0];
        var btn = document.getElementsByTagName('button')[0];

        var flag = true;
        //1:开始点名 div随机出现一个人名
        div.onclick = function () {
            if (flag) {
                flag = false;
                //name 是关键字 遍历name
                var timer = setInterval(function () {
                    var random = Math.round(Math.random() * (yname.length - 1));
                    console.log(yname.length-1);
                    
                    div.innerHTML = yname[random];
                    console.log(div.innerHTML);                        
                }, 20)


                btn.onclick = function () {
                    //停止及计时器
                    console.log(timer);
                    clearInterval(timer);
                     flag = true;
                }
               
            }

        }

    </script>

    <!-- <script>
            var cname = ['董志蒙','张海峰','张耀','卢本伟','朱成','蔡徐坤','王嘉儒','陈杰','杨玉钏','汪鑫']
           
            
            var div = document.getElementsByTagName('div')[0]
            var btn = document.getElementsByTagName('button')[0]
             var flag = true
            // 1: 点击 开始点名，div中随机出现一个人名
            div.onclick = function(){
                if(flag){
                    flag = false
                     // timer 作用 setInterval执行次数的识别数 1 2 3 .。。表示执行次数
                var timer = setInterval(function(){
                    // name关键字  遍历cname 数组
                    var random = Math.round(Math.random()*(cname.length-1))
                                      
                   cname.forEach(function(item,index){
                   // 显示随机获取的随机名字
                    div.innerHTML = cname[random]   
                    });
                },10)
                btn.onclick = function(){
                    // 添加这个永远为谢谢惠顾
                    // div.innerHTML = '谢谢惠顾'
                    // 停止计时器
                 clearInterval(timer)
                 flag = true
            }
                }
               
            }
           
            </script> -->

</body>

</html>

我又懂了

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
点名器

点名器的思路是随机获取到指定数组中的姓名字符串，点击显示框开始随机出现姓名，点击停止按钮时停止并得到随机的姓名。随机产生：使用 random 乘以数组长度减一再取整即可得到数组index的随机数。Math.round(Math.random() * (yname.length - 1));点击开始旧让定时器进行重复循环，快速给出不同的姓名。停止点名：清除定时器即可出现的问题：当我们重复点...
复制链接

扫一扫

专栏目录