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>
