js之随机点名

最新推荐文章于 2023-01-18 01:50:53 发布

等待的L先生

最新推荐文章于 2023-01-18 01:50:53 发布

阅读量123

点赞数

分类专栏： # JavaScript 文章标签： js 随机点名数组 setInterval 网页设计

本文链接：https://blog.csdn.net/weixin_42590083/article/details/111564550

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

js之随机点名

效果：
在这里插入图片描述

PS:在原来的效果中很快的，但是不知怎么的录下来就变得这么慢了

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名</title>
    <style>
        .box{
            width: 800px;
            margin: 200px auto;
            text-align: center;
        }
        .box h2{
            font-size: 55px;


            font-weight: 800;
        }
        .box input{
            outline: none;
            border: none;
            background: blue;
            color: white;
            width: 100px;
            height: 50px;
            font-size: 15px;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2 id="res">请点击下面的按钮，开始抽奖！</h2>
        <input type="button" value="点击开始" id="btn">
    </div>
    
    <script>
     var btn=   document.getElementById("btn");
     var res=   document.getElementById("res");
        var student=["张三","李四","王二","麻子","小明","小王","小胡","小虎","狗子","多银币","贡子哥","刘青松","瞎子","亚索"]
    
       var flag=true;
       var timer=null;
        //
        btn.onclick=function(){
          
           
            if(flag){
               timer= setInterval(function(){
                 var index=  getRandom(student.length-1,0) ;

                  
                 res.innerHTML=student[index];
                  
                  
                },10);
                
                btn.value="点击结束";
                flag=false;
            }else{
                clearInterval(timer);
                btn.value="点击开始";
                flag=true;
            }
           
        }



        function getRandom(max,min){
           
          return  Math.round(Math.random()*(max-min)+min);
        }
    </script>
</body>
</html>

等待的L先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js之随机点名

js之随机点名效果：PS:在原来的效果中很快的，但是不知怎么的录下来就变得这么慢了代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随机点名</title&g
复制链接

扫一扫

专栏目录