js實現隨機點名器精簡版
本文實例為大家分享了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 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>
附一張效果圖
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. java實現圖形化界面計算器2. IntelliJ Idea2017如何修改緩存文件的路徑3. IntelliJ IDEA設置條件斷點的方法步驟4. IIS Express 取代 ASP.NET Development Server的配置方法5. python flask框架快速入門6. Spring-Richclient 0.1.0 發布7. javascript設計模式 ? 建造者模式原理與應用實例分析8. 淺談SpringMVC jsp前臺獲取參數的方式 EL表達式9. Python使用oslo.vmware管理ESXI虛擬機的示例參考10. Express 框架中使用 EJS 模板引擎并結合 silly-datetime 庫進行日期格式化的實現方法
網公網安備