js實(shí)現(xiàn)隨機(jī)點(diǎn)名器精簡(jiǎn)版
本文實(shí)例為大家分享了js實(shí)現(xiàn)隨機(jī)點(diǎn)名器的具體代碼，供大家參考，具體內(nèi)容如下
此點(diǎn)名器開(kāi)始點(diǎn)名后需點(diǎn)擊停止按鈕完成點(diǎn)名，因?yàn)槭蔷?jiǎn)版沒(méi)有考慮自動(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> /* 頁(yè)面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'>開(kāi)始</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('張三,李四,王五,趙六,周七,田八,國(guó)九,歸零,張3,李4,王5,趙6,周7,田8,國(guó)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; //添加開(kāi)始按鈕的點(diǎn)擊事件 var timer = null; start.onclick = function () { // 設(shè)置定時(shí)器 timer = setInterval(function () { // 根據(jù)數(shù)組長(zhǎng)度范圍生成隨機(jī)數(shù) var i = Math.floor(Math.random() * nameArr.length); // 先通過(guò)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); } //頁(yè)面初始化時(shí)間設(shè)置 window.onload = function () { datatime(); } //頁(yè)面時(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>
附一張效果圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)2. 將properties文件的配置設(shè)置為整個(gè)Web應(yīng)用的全局變量實(shí)現(xiàn)方法3. 在JSP中使用formatNumber控制要顯示的小數(shù)位數(shù)方法4. 得到XML文檔大小的方法5. ASP.NET Core實(shí)現(xiàn)中間件的幾種方式6. 如何在jsp界面中插入圖片7. jsp實(shí)現(xiàn)textarea中的文字保存換行空格存到數(shù)據(jù)庫(kù)的方法8. 利用CSS3新特性創(chuàng)建透明邊框三角9. XML入門(mén)的常見(jiàn)問(wèn)題(二)10. ASP常用日期格式化函數(shù) FormatDate()
網(wǎng)公網(wǎng)安備