js實現(xiàn)隨機點名器精簡版
本文實例為大家分享了js實現(xiàn)隨機點名器的具體代碼，供大家參考，具體內(nèi)容如下
此點名器開始點名后需點擊停止按鈕完成點名，因為是精簡版沒有考慮自動停止需求。姓名數(shù)據(jù)以字符串形式儲存，適合小范圍點名使用，有大量需求可自己適當(dāng)改進。
<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'>隨機點名系統(tǒng)</h2> //實時顯示系統(tǒng)時間標簽 <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’); //數(shù)據(jù)準備 var nameString = new String('張三,李四,王五,趙六,周七,田八,國九,歸零,張3,李4,王5,趙6,周7,田8,國9,歸0'); var nameArr = nameString.split(','); //獲取每個學(xué)生姓名添加到標簽中，自動解析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 () { // 設(shè)置定時器 timer = setInterval(function () { // 根據(jù)數(shù)組長度范圍生成隨機數(shù) var i = Math.floor(Math.random() * nameArr.length); // 先通過for循環(huán)清空所有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); } //頁面初始化時間設(shè)置 window.onload = function () { datatime(); } //頁面時間動態(tài)刷新 setInterval(datatime, 1000); function datatime() { let data = new Date(); let dataString ='現(xiàn)在是北京時間：' + data.toLocaleString(); document.getElementById('data').innerHTML = dataString; }</script>
附一張效果圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 理解PHP5中static和const關(guān)鍵字2. Android table布局開發(fā)實現(xiàn)簡單計算器3. jQuery 實現(xiàn)DOM元素拖拽交換位置的實例代碼4. IntelliJ IDEA安裝插件的方法步驟5. php模擬實現(xiàn)斗地主發(fā)牌6. vue 使用localstorage實現(xiàn)面包屑的操作7. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)8. Python random庫使用方法及異常處理方案9. .Net Core使用Coravel實現(xiàn)任務(wù)調(diào)度的完整步驟10. Vuex localStorage的具體使用
網(wǎng)公網(wǎng)安備