js實現隨機點名器精簡版
阿新 • • 發佈:2020-06-29
本文例項為大家分享了js實現隨機點名器的具體程式碼,供大家參考,具體內容如下
此點名器開始點名後需點選停止按鈕完成點名,因為是精簡版沒有考慮自動停止需求。姓名資料以字串形式儲存,適合小範圍點名使用,有大量需求可自己適當改進。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>隨機點名生成</title> <style> /* 頁面css樣式 */ .wrapper { width: 800px; margin: 100px auto; border: 1px solid #ddd; text-align: center; } .box li { vertical-align: top; display: inline-block; width: 100px; height: 50px; border: 2px solid #ddd; border-radius: 15px; text-align: center; line-height: 50px; margin: 5px; } .wrapper button { border: none; width: 100px; height: 50px; border-radius: 10px; cursor: pointer; outline: none; margin-top: 20px; font-weight: bolder; color: #333; background-color: rgb(14,146,43); } .wrapper button { display: inline-block; } body { background-color: #eee; } </style> </head> <body> <div class="wrapper"> <h1 align="center">隨機點名系統</h2> //實時顯示系統時間標籤 <h6 id="data" align="right"></h6> <ul class="box"></ul> <button class="start">開始</button> <button class="stop">停止</button> </div> </body> <script> //定義全域性變數方便引用 var boxUl = document.getElementsByClassName('box')[0]; var start = document.getElementsByClassName('start')[0]; var stop = document.getElementsByClassName('stop')[0] var oLi = document.getElementsByTagName('li'); //資料準備 var nameString = new String("張三,李四,王五,趙六,周七,田八,國九,歸零,張3,李4,王5,趙6,周7,田8,國9,歸0"); var nameArr = nameString.split(","); //獲取每個學生姓名新增到標籤中,自動解析html標籤 var str = ""; for (let i = 0; i < nameArr.length; i++) { str += "<li >" + nameArr[i] + "</li>" } boxUl.innerHTML = str; //新增開始按鈕的點選事件 var timer = null; start.onclick = function () { // 設定定時器 timer = setInterval(function () { // 根據陣列長度範圍生成隨機數 var i = Math.floor(Math.random() * nameArr.length); // 先通過for迴圈清空所有style屬性 for (var j = 0; j < oLi.length; j++) { oLi[j].removeAttribute("style"); } // 為隨機選擇的li顏色屬性 oLi[i].style.background = "red"; },150); }; // 點選停止 stop.onclick = function () { // 清空定時器停止點名 clearInterval(timer); } //頁面初始化時間設定 window.onload = function () { datatime(); } //頁面時間動態重新整理 setInterval(datatime,1000); function datatime() { let data = new Date(); let dataString ="現在是北京時間:" + data.toLocaleString(); document.getElementById("data").innerHTML = dataString; } </script>
附一張效果圖
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。