JavaScript ベースのランダム点呼システムの実装

<本文>
 <h1>点呼</h1>
 <div id="did">
  <input id="rollcall-id" type="button" value="ランダム点呼"><br>
  <input id="アクションID" type="送信" onclick="doClick()" value="開始">
 </div>
</本文>

<スタイル>
 * {
  マージン: 0px;
  パディング: 0px;
 }

 体 {
  背景色: rgb(255, 249, 249);
 }

 h1 {
  テキスト配置: 中央;
  パディング上部: 100px;
  色: rgba(250, 54, 129, 0.562);
 }

 ＃した {
  位置: 相対的;
  幅: 200ピクセル;
  マージン: 60px 自動;
 }

 #入力しました:first-child {
  幅: 200ピクセル;
  高さ: 60px;
  背景色: rgba(250, 54, 129, 0.562);
  /* 境界線なし、または境界線を透明に設定する*/
  境界線: なし;
  境界線の半径: 20px;
  フォントサイズ: 25px;
  色: #fff;
  ボックスの影: 0px 0px 3px 3px rgba(250, 54, 129, 0.158);
  /* クリックすると境界線が消えます*/
  アウトライン: 0;
 }

 #入力しました:nth-last-child(1) {
  幅: 100ピクセル;
  高さ: 40px;
  マージン: 40px 50px;
  背景色: rgba(250, 54, 129, 0.562);
  境界線: 1px 透明の実線;
  背景色: rgba(255, 68, 177, 0.432);
  境界線の半径: 15px;
  ボックスの影: 0px 0px 2px 2px rgba(250, 54, 129, 0.158);
  フォントサイズ: 17px;
  色: #333;
  アウトライン: 0;
  トランジション: カラー 0.2 秒のイーズアウト;
  遷移: box-shadow 0.2s イーズアウト;
 }

 #入力しました:nth-last-child(1):hover {
  色: #fff;
  カーソル: ポインタ;
  ボックスの影: 0px 0px 4px 4px rgba(250, 54, 129, 0.158);
 }
</スタイル>

<スクリプト>
 var ロールコール = document.getElementById("ロールコールID");
 var アクション = document.getElementById("アクションID");
 var h1 = document.getElementsByTagName("h1");

 //名前は使用できません。名前を使用すると 1 文字しか取得されません。var allName = ["Zhang Liufei", "Gao Yingying", "Zhao Wenyan", "Li Ying", "Deng Chenxi", "Mo Ruolin", "Qin Cheng",
  「呉小玉」、「趙熙」、「馬素英」、「呂琴雅」、「羅洪哲」、「夏素雲」、「謝延志」、
  「曹孟孟」、「李雲樹」、「周鳳橋」、「孫昊」、「江延静」、「楊振凱」、「林樹燕」、
  「千妙妙」、「郭静」、「杜北北」、「童敏然」、「鍾小玲」、「韓雲雲」、「白蘭志」];

 //ランダムな名前を生成する function stringRandom() {
  parseInt(Math.random() * allName.length) を返します。
 }

 var 時間 = null;
 var 運名;
 //開始関数doStart() {
  時間 == null の場合 {
   時間 = setInterval(関数() {
    //ランダムな名前の値を取得します luckName = allName[stringRandom()];
    rollcall.setAttribute("値", luckName);
   }, 100);
  }
 }

 //停止関数doStop() {
  （時間！= null）の場合{
   クリア間隔(時間);
   時間 = null;
  }
 }

 //クリックイベント関数doClick() {
  if (action.value == "開始") {
   //スタイルを変更する action.style.backgroundColor = "#cecece";
   action.style.boxShadow = "0px 0px 2px 2px rgba(100, 100, 100, 0.4)";
   action.value = "停止";
   h1[0].innerHTML = "ロールロール";

   //ランダムロールコールを開始します。doStart();
  } そうでない場合 (action.value == "停止") {
   action.style.backgroundColor = "rgba(255, 68, 177, 0.432)";
   action.style.boxShadow = "0px 0px 2px 2px rgba(250, 54, 129, 0.158)";
   action.value = "開始";
   h1[0].innerHTML = "おめでとう" + luckName + "クラスメイトが話す機会を得ました";

   //停止doStop();
  }
 }
</スクリプト>