js隨機點名系統

本文轉載自查看原文 2017-05-06 15:59 17475 js隨機點名系統/ JavaScript

  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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS之隨機點名系統隨機點名系統原生js實現簡單的隨機點名系統 JavaScript簡單的隨機點名系統 Python 實現點名系統 JavaGUI實現點名系統用Python做窗口化滾動點名系統 js隨機點名器（簡單） Tkinter 隨機點名器 Excel小技巧（隨機點名）