js隨機點名系統
阿新 • • 發佈：2017-05-06
time() pin tin log lang 調用 虛擬 auto set
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>
js隨機點名系統