Implementierung eines Random Roll Callers basierend auf JavaScript

<Text>
 <h1>Namensaufruf</h1>
 <div id="hat">
  <input id="rollcall-id" type="button" value="Zufälliger Namensaufruf"><br>
  <input id="Aktions-ID" Typ="Senden" onclick="doClick()" Wert="Start">
 </div>
</body>

<Stil>
 * {
  Rand: 0px;
  Polsterung: 0px;
 }

 Körper {
  Hintergrundfarbe: rgb(255, 249, 249);
 }

 h1 {
  Textausrichtung: zentriert;
  Polsterung oben: 100px;
  Farbe: rgba (250, 54, 129, 0,562);
 }

 #tat {
  Position: relativ;
  Breite: 200px;
  Rand: 60px automatisch;
 }

 #did Eingabe: erstes Kind {
  Breite: 200px;
  Höhe: 60px;
  Hintergrundfarbe: rgba (250, 54, 129, 0,562);
  /* Kein Rand oder Rand auf transparent setzen*/
  Rand: keiner;
  Rahmenradius: 20px;
  Schriftgröße: 25px;
  Farbe: #fff;
  Boxschatten: 0px 0px 3px 3px rgba (250, 54, 129, 0,158);
  /*Rahmen verschwindet beim Anklicken*/
  Umriss: 0;
 }

 #did input:n-tes-letztes-Kind(1) {
  Breite: 100px;
  Höhe: 40px;
  Rand: 40px 50px;
  Hintergrundfarbe: rgba (250, 54, 129, 0,562);
  Rand: 1px durchgehend transparent;
  Hintergrundfarbe: rgba(255, 68, 177, 0,432);
  Rahmenradius: 15px;
  Boxschatten: 0px 0px 2px 2px rgba (250, 54, 129, 0,158);
  Schriftgröße: 17px;
  Farbe: #333;
  Umriss: 0;
  Übergang: Farbe 0,2 s Ausklang;
  Übergang: Box-Shadow, 0,2 s Auslaufzeit;
 }

 #hat input:n-tes-letztes-kind(1):hover {
  Farbe: #fff;
  Cursor: Zeiger;
  Boxschatten: 0px 0px 4px 4px rgba (250, 54, 129, 0,158);
 }
</Stil>

<Skript>
 var rollcall = document.getElementById("rollcall-id");
 var Aktion = document.getElementById("Aktions-ID");
 var h1 = document.getElementsByTagName("h1");

 //Name kann nicht verwendet werden, die Verwendung von Name ergibt nur ein Zeichen var allName = ["Zhang Liufei", "Gao Yingying", "Zhao Wenyan", "Li Ying", "Deng Chenxi", "Mo Ruolin", "Qin Cheng",
  "Wu Xiaoyu", "Zhao Xi", "Ma Suying", "Lü Qinya", "Luo Hongzhe", "Xia Suyun", "Xie Yanzhi",
  "Cao Mengmeng", "Li Yunshu", "Zhou Fengqiao", "Sun Hao", "Jiang Yanjing", "Yang Zhenkai", "Lin Shuyan",
  „Qian Miaomiao“, „Guo Jing“, „Du Beibei“, „Tong Minran“, „Zhong Xiaoling“, „Han Yunyun“, „Bai Ranzhi“];

 //Erstelle einen zufälligen Namen function stringRandom() {
  returniere parseInt(Math.random() * alleNamen.Länge);
 }

 var Zeit = null;
 var Glücksname;
 //Funktion starten doStart() {
  wenn (Zeit == null) {
   Zeit = setzeIntervall(Funktion () {
    //Wert des zufälligen Namens abrufen luckName = allName[stringRandom()];
    rollcall.setAttribute("Wert", luckName);
   }, 100);
  }
 }

 //Stopp-Funktion doStop() {
  wenn (Zeit != null) {
   ClearInterval(Zeit);
   Zeit = null;
  }
 }

 //Klick-Ereignisfunktion doClick() {
  wenn (Aktion.Wert == "Start") {
   //Stil ändern action.style.backgroundColor = "#cecece";
   Aktion.Stil.BoxShadow = "0px 0px 2px 2px rgba(100, 100, 100, 0,4)";
   Aktion.Wert = "Stopp";
   h1[0].innerHTML = "Rolle, rolle";

   //Zufälligen Namensaufruf starten doStart();
  } sonst wenn (Aktion.Wert == "Stopp") {
   Aktion.Stil.Hintergrundfarbe = "rgba(255, 68, 177, 0,432)";
   action.style.boxShadow = "0px 0px 2px 2px rgba(250, 54, 129, 0,158)";
   Aktion.Wert = "Start";
   h1[0].innerHTML = "Herzlichen Glückwunsch" + luckName + "Der Klassenkamerad hatte die Gelegenheit, zu sprechen";

   //Stopp doStop();
  }
 }
</Skript>