html實現(xiàn)隨機點名器的示例代碼
發(fā)布時間:2021-04-01 17:07:41 作者:futurism_
我要評論

這篇文章主要介紹了html實現(xiàn)隨機點名器的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
此點名器開始點名后需點擊停止按鈕完成點名,因為是精簡版沒有考慮自動停止需求。姓名數(shù)據(jù)以字符串形式儲存,適合小范圍點名使用,有大量需求可自己適當改進。
<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 id="data" 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(","); //獲取每個學生姓名添加到標簽中,自動解析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>
附一張效果圖
到此這篇關(guān)于html實現(xiàn)隨機點名器的示例代碼的文章就介紹到這了,更多相關(guān)html隨機點名器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- HTML表格用于在網(wǎng)頁上展示數(shù)據(jù),通過標簽及其相關(guān)標簽來創(chuàng)建,表格由行和列組成,每一行包含一個或多個單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細介紹HTML表格2025-03-12
- 本文介紹了三種禁止HTML頁面滾動的方法:通過CSS的overflow屬性、使用JavaScript的滾動事件監(jiān)聽器以及使用CSS的position:fixed屬性,每種方法都有其適用場景和優(yōu)缺點,感興2025-02-24
- 在 Web 開發(fā)中,文本的視覺效果是提升用戶體驗的重要因素之一,通過 CSS 技巧,我們可以創(chuàng)造出許多獨特的效果,例如文字鏤空效果,本文將帶你一步一步實現(xiàn)一個簡單的文字鏤空2024-11-17
- 在Html中,a標簽?zāi)J的超鏈接樣式是藍色字體配下劃線,這可能不滿足所有設(shè)計需求,如需去除這些默認樣式,可以通過CSS來實現(xiàn),本文給大家介紹Html去除a標簽的默認樣式的操作代碼2024-09-25
- 在HTML中,可以通過設(shè)置CSS的resize屬性為none,來禁止用戶手動拖動文本域(textarea)的大小,這種方法簡單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進行測試以確保2024-09-25
- 本文詳細介紹了如何利用HTML和CSS實現(xiàn)多種風格的進度條,包括基礎(chǔ)的水平進度條、環(huán)形進度條以及球形進度條等,還探討了如何通過動畫增強視覺效果,內(nèi)容涵蓋了使用HTML原生標簽2024-09-19
- Canvas 提供了一套強大的 2D 繪圖 API,適用于各種圖形繪制、圖像處理和動畫制作,可以幫助你創(chuàng)建復(fù)雜且高效的網(wǎng)頁圖形應(yīng)用,這篇文章主要介紹了HTML中Canvas關(guān)鍵知識點總結(jié)2024-06-03
html table+css實現(xiàn)可編輯表格的示例代碼
本文主要介紹了html table+css實現(xiàn)可編輯表格的示例代碼,主要使用HTML5的contenteditable屬性,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習2024-03-06- 本文主要介紹了HTML中使用Flex布局實現(xiàn)雙行夾批效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習2024-02-22
- 在網(wǎng)站開發(fā)中,登錄頁面是必不可少的一部分,本文就來介紹一下HTML+CSS實現(xiàn)登錄切換,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需2024-02-02