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>
    <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>

猜你喜欢

转载自blog.csdn.net/weixin_42590083/article/details/111564550