用js做一个随机点名

最新推荐文章于 2023-03-14 22:36:28 发布

猫与猫与猫

最新推荐文章于 2023-03-14 22:36:28 发布

阅读量872

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/chloe_xuuu/article/details/111599702

版权

DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">   
<meta name="viewport" content="width=device-width, initial-scale=1.0">   
 <title>Document</title>
    <style>       
    
          *{margin:0;padding:0}       
         #txt{border:2px solid black;       
            width:500px;      
             height:400px;      
              margin:200px auto;       
              background:rgba(55, 68, 55 ,0.4);      
               position:relative;       }   
                  
           h1 {width:500px;      
           height:200px;       
            text-align:center;      
            line-height:200px}
       #btn{width:200px;      
        height:50px;       
        background:darkcyan;      
        position:absolute;      
         bottom:100px;      
          left:50%;      
           margin-left:-100px;      
            border-radius: 15px;      
             color:floralwhite;      
              font-size:20px}
    </style>
    </head>
    <body>    
      <div id="txt">      
           <h1 id="text">点击开始</h1>        
           <button id="btn">开始点名</button>    
      </div>
</body>
<script>    
       var text=document.getElementById("text")     
       var btn=document.getElementById("btn")     
        var timer   //计时器            
var arr=["薛刚","李坤","常庆玲","程龙","徐煌","胡小缓","冯忠辉","余玲","陈昊林","郑    浩","吴浩","陈启帆","冯卫平","曾争","张涛","平金获","刘威","高坤伦","金鑫","王婷婷","刘  盼","邱嘉燕","汪恒","郭风雷","于智博","蔡少东","吴宁静","汪国文","葛怀慧"]    
    var test= true     
 btn.onclick=function(){      
  if(test){     
          start()       
          btn.innerHTML="结束"      
          test=false       }      
 else{     
          stop()       
           btn.innerHTML="开始"       
            test=true  
        }    
 }  function start(){      
   timer=setInterval(function random(){       
           
      var index=parseInt(Math.random()*arr.length)         
       text.innerHTML=arr[index]
      }, 50);
      }     
function stop(){    
clearInterval(timer)
}
</script>
</html>