js實(shí)現(xiàn)隨機(jī)點(diǎn)名器精簡版
本文實(shí)例為大家分享了js實(shí)現(xiàn)隨機(jī)點(diǎn)名器的具體代碼，供大家參考，具體內(nèi)容如下
此點(diǎn)名器開始點(diǎn)名后需點(diǎn)擊停止按鈕完成點(diǎn)名，因?yàn)槭蔷啺鏇]有考慮自動(dòng)停止需求。姓名數(shù)據(jù)以字符串形式儲(chǔ)存，適合小范圍點(diǎn)名使用，有大量需求可自己適當(dāng)改進(jìn)。
<head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>隨機(jī)點(diǎn)名生成</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'>隨機(jī)點(diǎn)名系統(tǒng)</h2> //實(shí)時(shí)顯示系統(tǒng)時(shí)間標(biāo)簽 <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ù)準(zhǔn)備 var nameString = new String('張三,李四,王五,趙六,周七,田八,國九,歸零,張3,李4,王5,趙6,周7,田8,國9,歸0'); var nameArr = nameString.split(','); //獲取每個(gè)學(xué)生姓名添加到標(biāo)簽中，自動(dòng)解析html標(biāo)簽 var str = ''; for (let i = 0; i < nameArr.length; i++) { str += '<li >' + nameArr[i] + '</li>' } boxUl.innerHTML = str; //添加開始按鈕的點(diǎn)擊事件 var timer = null; start.onclick = function () { // 設(shè)置定時(shí)器 timer = setInterval(function () { // 根據(jù)數(shù)組長度范圍生成隨機(jī)數(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'); } // 為隨機(jī)選擇的li顏色屬性 oLi[i].style.background = 'red'; }, 150); }; // 點(diǎn)擊停止 stop.onclick = function () { // 清空定時(shí)器停止點(diǎn)名 clearInterval(timer); } //頁面初始化時(shí)間設(shè)置 window.onload = function () { datatime(); } //頁面時(shí)間動(dòng)態(tài)刷新 setInterval(datatime, 1000); function datatime() { let data = new Date(); let dataString ='現(xiàn)在是北京時(shí)間：' + data.toLocaleString(); document.getElementById('data').innerHTML = dataString; }</script>
附一張效果圖
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Python TestSuite生成測試報(bào)告過程解析2. python讓函數(shù)不返回結(jié)果的方法3. python之cur.fetchall與cur.fetchone提取數(shù)據(jù)并統(tǒng)計(jì)處理操作4. JSP之表單提交get和post的區(qū)別詳解及實(shí)例5. python實(shí)現(xiàn)讀取類別頻數(shù)數(shù)據(jù)畫水平條形圖案例6. PHP循環(huán)與分支知識(shí)點(diǎn)梳理7. 解決AJAX返回狀態(tài)200沒有調(diào)用success的問題8. chat.asp聊天程序的編寫方法9. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案10. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器
網(wǎng)公網(wǎng)安備