js随机点名系统

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         body{
  8             background-color: hotpink;
  9         }
 10         .box{
 11             width: 1000px;
 12             height: 240px;
 13             margin: 0 auto;
 14             margin-top: 100px;
 15             clear: both;
 16         }
 17         #btn{
 18             width: 100px;
 19             height: 30px;
 20             margin-left: 600px;
 21             margin-top: 50px;
 22         }
 23         .name{
 24             width: 100px;
 25             height: 30px;
 26             float: left;
 27             background-color: antiquewhite;
 28             margin-left: 10px;
 29             margin-top: 10px;
 30             text-align: center;
 31             line-height: 30px;
 32         }
 33         #span{
 34             float: right;
 35             position: relative;
 36             top: 55px;
 37             right: 185px;
 38         }
 39         h1{
 40             text-align: center;
 41         }
 42     </style>
 43 
 44 </head>
 45 <body>
 46 <h1>随机点名系统</h1>
 47 <span id="span"></span>
 48 <div class="box" id="box"></div>
 49 <input type="button" id="btn" value="点名"/>
 50 <script type="text/javascript">
 51     //创造虚拟后台数据
 52     var arrs = ["崔雪莉","郭雪芙","嘉歆","阿芳","雪灵","老王","刘疙瘩","许大妈",
 53         "韩晁","静涵","允儿","查灿灿","靓影","杨幂","李静","邓超","李伟","蓝老师"
 54         ,"金枝","静恬","允儿","杨幂","晶灵","林志玲","嘉懿","流行","邓超","郭琦"
 55         ,"允儿","许大妈","林妹妹","杨幂","佳思","吉玉","张焕","张赛","师傅","菊月"
 56         ,"王晶","吉玟","王飞","林志玲","曾艳","王翠青","JaydenLD"];
 57     //获取父元素
 58     var boxNode = document.getElementById("box");
 59     for (var i = 0; i < arrs.length; i++) {
 60         //创建新元素
 61         var divNode = document.createElement("div");
 62         divNode.innerHTML=arrs[i];
 63         divNode.className="name";
 64         boxNode.appendChild(divNode);
 65     }
 66     //点名
 67     var btn= document.getElementById("btn");
 68     btn.onclick = function () {
 69         if(this.value==="点名"){
 70                 //定时
 71             timeId=setInterval(function () {
 72                     //清空所有颜色
 73                 for (var j = 0; j < arrs.length; j++) {
 74                     boxNode.children[j].style.background="";
 75                 }
 76                 //留下当前颜色
 77                 var random = parseInt(Math.random()*arrs.length);
 78                 boxNode.children[random].style.background="red";
 79             },100);
 80             this.value="停止";
 81         }else{
 82             //清除计时器
 83             clearInterval(timeId);
 84             this.value="点名";
 85         }
 86     }
 87     var spanNode = document.getElementById("span");
 88     //调用时间
 89     getTime();
 90     setInterval(getTime , 1000);
 91     function getTime() {
 92         var day = new Date();
 93         var year = day.getFullYear();
 94         var month = day.getMonth()+1;
 95         var dat = day.getDay();
 96         var hours = day.getHours();
 97         var minitues = day.getMinutes();
 98         var second = day.getSeconds();
 99         spanNode.innerHTML =year+"-"+month+"-"+dat+" "+hours+":"+minitues+":"+second;
100     }
101 </script>
102 </body>
103 </html>