html制作点名器

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           #p1{
               width: 400px;
               height: 200px;
               color: lavenderblush;
               background-color: red;
               text-align: center;
               line-height: 200px;
               font-size: 300%;
               font-family: "华文行楷";
           }
           #b1{
               width: 100px;
               height: 50px;
               text-align: center;
               margin-left: 120px;
           }
       </style>
   </head>
   <body>
       <p id="p1">开始点名</p>
       <button id="b1">开始</button>
   </body>
   <script>
       var a=['李XX','熊XX','张XX','严XX','龚XX','章XX','郑XX','吴XX','李XX','罗XX'];
       var op = document.getElementById("p1");
       var oBtn = document.getElementById("b1");
       var start;
       var n = true;
       function first(){
           start = setInterval(function(){
                   for(var i=0;i<a.length;i++){
                       var num = parseInt(Math.random()*a.length);
                       op.innerHTML = a[num];
                   }
               },100)
       }
       function end(){
           clearInterval(start);
       }
       oBtn.onclick = function(){
           if(n == true){
               n=false;
               oBtn.innerHTML="停止";
               first();
           }else if(n == false){
               n = true;
               oBtn.innerHTML="开始";
               end();
           }
       }
   </script>
</html>

猜你喜欢