HTML でランダムロールコーラーを実装するためのサンプルコード

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ランダムロールコール生成</title>

    <スタイル>
        /* ページ CSS スタイル */
        .ラッパー{
            幅: 800ピクセル;
            マージン: 100px 自動;
            境界線: 1px 実線 #ddd;
            テキスト配置: 中央;
        }

        .box li {
            垂直方向の位置合わせ: 上;
            表示: インラインブロック;
            幅: 100ピクセル;
            高さ: 50px;
            境界線: 2px 実線 #ddd;
            境界線の半径: 15px;
            テキスト配置: 中央;
            行の高さ: 50px;
            マージン: 5px;
        }
        
        .wrapper ボタン {
            境界線: なし;
            幅: 100ピクセル;
            高さ: 50px;
            境界線の半径: 10px;
            カーソル: ポインタ;
            アウトライン: なし;
            上マージン: 20px;
            フォントの太さ: 太字;
            色: #333;
            背景色: rgb(14, 146, 43);
        }

        .wrapper ボタン {
            表示: インラインブロック;
        }

        体 {
            背景色: #eee;
        }
    </スタイル>

</head>

<本文>
    <div class="wrapper">
     <h1 align="center">ランダム点呼システム</h2>
      //システムタイムタグのリアルタイム表示<h6 id="data" align="right"></h6>
        <ul class="box"></ul>
        <button class="start">開始</button>
        <button class="stop">停止</button>
    </div>
</本文>

<スクリプト>
    //簡単に参照できるようにグローバル変数を定義します var boxUl = document.getElementsByClassName('box')[0];
    var start = document.getElementsByClassName('start')[0];
    var stop = document.getElementsByClassName('stop')[0]
    タグ名によって要素を取得します。

    //データ準備 var nameString = new String("Zhang San、Li Si、Wang Wu、Zhao Liu、Zhou Qi、Tian Ba、Guo Jiu、ゼロに戻る、Zhang 3、Li 4、Wang 5、Zhao 6、Zhou 7、Tian 8、Guo 9、0に戻る");
    var nameArr = nameString.split(",");

    //各生徒の名前を取得してラベルに追加し、HTML タグを自動的に解析します var str = "";
    (i = 0 とします; i < nameArr.length; i++) {
        str += "<li >" + nameArr[i] + "</li>"
    }
    boxUl.innerHTML = str;

    //スタートボタンのクリックイベントを追加します。var timer = null;
    start.onclick = 関数（）{
        // タイマーを設定する timer = setInterval(function () {

            // 配列の長さの範囲に基づいて乱数を生成します。var i = Math.floor(Math.random() * nameArr.length);
            // まず、for ループですべてのスタイル属性をクリアします for (var j = 0; j < oLi.length; j++) {
                oLi[j].removeAttribute("スタイル");
            }
            // ランダムに選択された li の色属性 oLi[i].style.background = "red";
        }, 150);
    };
    // クリックして停止します stop.onclick = function () {
        // タイマーをクリアし、clearInterval(timer); の呼び出しを停止します。
    }
    //ページ初期化時間設定 window.onload = function () {
        データ時間();
    }
    //ページ時間の動的更新 setInterval(datatime, 1000);

    関数データタイム() {
        data = new Date();
        let dataString = "今は北京時間です: " + data.toLocaleString();
        document.getElementById("data").innerHTML = dataString;
    }
</スクリプト>