Beispielcode zur Implementierung eines zufälligen Roll Callers in HTML

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Zufällige Generierung von Namensaufrufen</title>

    <Stil>
        /* CSS-Stil der Seite */
        .wrapper {
            Breite: 800px;
            Rand: 100px automatisch;
            Rand: 1px durchgezogen #ddd;
            Textausrichtung: zentriert;
        }

        .box li {
            vertikale Ausrichtung: oben;
            Anzeige: Inline-Block;
            Breite: 100px;
            Höhe: 50px;
            Rand: 2px durchgezogen #ddd;
            Rahmenradius: 15px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 50px;
            Rand: 5px;
        }
        
        .wrapper-Schaltfläche {
            Rand: keiner;
            Breite: 100px;
            Höhe: 50px;
            Rahmenradius: 10px;
            Cursor: Zeiger;
            Gliederung: keine;
            Rand oben: 20px;
            Schriftstärke: fett;
            Farbe: #333;
            Hintergrundfarbe: rgb(14, 146, 43);
        }

        .wrapper-Schaltfläche {
            Anzeige: Inline-Block;
        }

        Körper {
            Hintergrundfarbe: #eee;
        }
    </Stil>

</Kopf>

<Text>
    <div Klasse="Wrapper">
     <h1 align="center">Zufälliges Namensaufrufsystem</h2>
      //Echtzeitanzeige des Systemzeit-Tags<h6 id="data" align="right"></h6>
        <ul Klasse="Box"></ul>
        <button class="start">Starten</button>
        <button class="stop">Stopp</button>
    </div>
</body>

<Skript>
    //Definieren Sie globale Variablen zur einfachen Referenz var boxUl = document.getElementsByClassName('box')[0];
    var start = document.getElementsByClassName('start')[0];
    var stop = document.getElementsByClassName('stop')[0]
    var oLi = document.getElementsByTagName('li');

    //Datenvorbereitung var nameString = neuer String("Zhang San, Li Si, Wang Wu, Zhao Liu, Zhou Qi, Tian Ba, Guo Jiu, zurück auf Null, Zhang 3, Li 4, Wang 5, Zhao 6, Zhou 7, Tian 8, Guo 9, zurück auf 0");
    var nameArr = nameString.split(",");

    //Holen Sie sich den Namen jedes Schülers und fügen Sie ihn dem Etikett hinzu. Analysieren Sie das HTML-Tag automatisch. var str = "";
    für (lass i = 0; i < nameArr.length; i++) {
        str += "<li >" + nameArr[i] + "</li>"
    }
    boxUl.innerHTML = str;

    //Klickereignis der Startschaltfläche hinzufügen var timer = null;
    start.onclick = Funktion () {
        //Setze den Timer timer = setInterval(function () {

            // Zufallszahlen basierend auf dem Längenbereich des Arrays generieren var i = Math.floor(Math.random() * nameArr.length);
            // Lösche zunächst alle Stilattribute mit der for-Schleife for (var j = 0; j < oLi.length; j++) {
                oLi[j].removeAttribute("Stil");
            }
            // Farbattribut für zufällig ausgewähltes li oLi[i].style.background = "red";
        }, 150);
    };
    // Zum Stoppen klicken stop.onclick = function () {
        // Lösche den Timer und beende den Aufruf von clearInterval(timer);
    }
    //Einstellung der Seiteninitialisierungszeit window.onload = function () {
        Datenzeit();
    }
    //Dynamische Aktualisierung der Seitenzeit setInterval(datatime, 1000);

    Funktion Datenzeit() {
        let data = neues Datum();
        let dataString = "Jetzt ist es Pekinger Zeit: " + data.toLocaleString();
        document.getElementById("data").innerHTML = Datenstring;
    }
</Skript>