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>
