欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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 表格詳解(簡單易懂較詳細)

    HTML表格用于在網(wǎng)頁上展示數(shù)據(jù),通過標簽及其相關(guān)標簽來創(chuàng)建,表格由行和列組成,每一行包含一個或多個單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細介紹HTML表格
    2025-03-12
  • 禁止HTML頁面滾動的操作方法

    本文介紹了三種禁止HTML頁面滾動的方法:通過CSS的overflow屬性、使用JavaScript的滾動事件監(jiān)聽器以及使用CSS的position:fixed屬性,每種方法都有其適用場景和優(yōu)缺點,感興
    2025-02-24
  • 使用HTML和CSS實現(xiàn)文字鏤空效果的代碼示例

    在 Web 開發(fā)中,文本的視覺效果是提升用戶體驗的重要因素之一,通過 CSS 技巧,我們可以創(chuàng)造出許多獨特的效果,例如文字鏤空效果,本文將帶你一步一步實現(xiàn)一個簡單的文字鏤空
    2024-11-17
  • Html去除a標簽的默認樣式的操作代碼

    在Html中,a標簽?zāi)J的超鏈接樣式是藍色字體配下劃線,這可能不滿足所有設(shè)計需求,如需去除這些默認樣式,可以通過CSS來實現(xiàn),本文給大家介紹Html去除a標簽的默認樣式的操作代碼
    2024-09-25
  • HTML文本域如何設(shè)置為禁止用戶手動拖動

    在HTML中,可以通過設(shè)置CSS的resize屬性為none,來禁止用戶手動拖動文本域(textarea)的大小,這種方法簡單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進行測試以確保
    2024-09-25
  • 如何通過HTML/CSS 實現(xiàn)各類進度條的功能

    本文詳細介紹了如何利用HTML和CSS實現(xiàn)多種風格的進度條,包括基礎(chǔ)的水平進度條、環(huán)形進度條以及球形進度條等,還探討了如何通過動畫增強視覺效果,內(nèi)容涵蓋了使用HTML原生標簽
    2024-09-19
  • HTML中Canvas關(guān)鍵知識點總結(jié)

    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)雙行夾批效果

    本文主要介紹了HTML中使用Flex布局實現(xiàn)雙行夾批效果,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習
    2024-02-22
  • HTML+CSS實現(xiàn)炫酷登錄切換的項目實踐

    在網(wǎng)站開發(fā)中,登錄頁面是必不可少的一部分,本文就來介紹一下HTML+CSS實現(xiàn)登錄切換,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需
    2024-02-02

最新評論