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 for循環的那些坑2. UTF8轉成GB2312亂碼問題解決方案3. java 運行報錯has been compiled by a more recent version of the Java Runtime4. 在Dreamhost上使用virtualenv更新新的Django和Python 2.7*(with passenger)5. Spring中@Value讀取properties作為map或list的操作6. php采用數據庫保存session7. 如何用tempfile庫創建python進程中的臨時文件8. 如何利用Python matplotlib繪制雷達圖9. 詳解CSS偽元素的妙用單標簽之美10. 新手學python應該下哪個版本
網公網安備