js随机点名系统

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
       td{
           width: 100px;
           height: 100px;
           text-align: center;
       }
       .tdg{
           background-color: #F00C30;
           color:#f00c30;
       }
       .tdk{
           color:#f00c30;
       }
       .tdsj{
           background-color: #ffffff;
           color:#ffffff;
       }
   </style>
</head>
<body>
   <table border="1" align="center">
       <tr>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
       </tr>
       <tr>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
       </tr>
       <tr>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
       </tr>
       <tr>
           <td></td>
           <td></td>
           <td></td>
           <td></td>
       </tr>
   </table>
   <p align="center">
       <input type="button" value="随机抽取" onclick="myShow()">
       <input type="button" value="打乱排序" onclick="myRandom()">
       <br>
       <input type="button" value="快速抽取" onclick="mySelect()">
       <input type="button" value="停止抽取" onclick="myStop()">
   </p>
   <script type="text/javascript">

       Array.prototype.contains = function(obj) {
          var i = this.length;
           while (i--) {
               if (this[i] === obj) {
                     return true;
               }
          }
          return false;
       };
       var students=["周元康","刘婷婷","彭丹","凌红伟","吕雷","曾靖","张艳","符幸","邓蔚","龙英杰","李文星","周建鹏","何礼波","李交胜","刘芳","张三"];

       function myRandom(){
           var sz = [];//用来装随机下标
           while(sz.length!=students.length){
               var index=parseInt(Math.random()*students.length);
               if(!sz.contains(index)){//判断下标是否存在
                   sz.push(index);
               }
           }
           var tds=document.getElementsByTagName('td');
           for (var i = 0; i < tds.length; i++) {
               tds[i].innerHTML=students[sz[i]];
               tds[i].setAttribute('class',"tdg");
               tds[i].onclick=function () {
                   this.setAttribute('class',"tdk");
               }
           }
       }
       myRandom();
       function myShow(){
           var index=parseInt(Math.random()*students.length);
           var tds=document.getElementsByTagName('td');
           if(tds[index].getAttribute('class')=='tdk'){
               myShow();
           }
           tds[index].setAttribute('class',"tdk");
       }

       var b;
       function mySelect(){
           var a=-1;
           var tds=document.getElementsByTagName('td');
           if(b==undefined){
               b=setInterval(function(){
                   for (var i = 0; i < students.length; i++) {
                       var className=tds[i].getAttribute('class');
                       if(className!='tdk'){
                           tds[i].setAttribute('class',"tdg");
                       }
                   }
                   a++;
                   if(tds[a%students.length].getAttribute('class')!='tdk'){
                       tds[a%students.length].setAttribute("class","tdsj");
                   }

               },30);
           }
       }

       function myStop(){
           window.clearInterval(b);
           b=undefined;
           var tds=document.getElementsByTagName('td');
           for (var i = 0; i < tds.length; i++) {
               var className=tds[i].getAttribute('class');
               if(className=='tdsj'){
                   tds[i].setAttribute('class',"tdk");
               }
           }
       }

   </script>
</body>
</html>

猜你喜欢