JavaScript-Tippspiel

<mian>
 <div id="char">A</div>
 <div id="result">Bitte drücken Sie den auf dem Bildschirm angezeigten Buchstaben</div>
</mian>

/*animieren.css*/
.animiert {
 -Webkit-Animationsdauer: 1 s;
 Animationsdauer: 1 s;
 -webkit-animation-fill-mode: beides;
 Animationsfüllmodus: beides;
}

.animiert.unendlich {
 -webkit-animation-iteration-count: unendlich;
 Anzahl der Animationsiterationen: unendlich;
}

.animiertes.Scharnier {
 -Webkit-Animationsdauer: 2 s;
 Animationsdauer: 2s;
}

.animiert.flipOutX,
.animiert.flipOutY,
.animiert.bounceIn,
.animiert.bounceOut {
 -Webkit-Animationsdauer: 0,75 s;
 Animationsdauer: 0,75 s;
}
@-webkit-keyframes zoomIn {
 aus {
 Deckkraft: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transformieren: scale3d(.3, .3, .3);
 }

 50 % {
 Deckkraft: 1;
 }
}

@keyframes zoomIn {
 aus {
 Deckkraft: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transformieren: scale3d(.3, .3, .3);
 }

 50 % {
 Deckkraft: 1;
 }
}

.zoomIn {
 -webkit-animation-name: zoomIn;
 Animationsname: zoomIn;
}
  .animiert {
 -Webkit-Animationsdauer: 1 s;
 Animationsdauer: 1 s;
 -webkit-animation-fill-mode: beides;
 Animationsfüllmodus: beides;
}
@-webkit-keyframes schütteln {
 von, bis
 -webkit-transform: übersetzen3d(0, 0, 0);
 transformieren: übersetzen3d(0, 0, 0);
 }

 10 %, 30 %, 50 %, 70 %, 90 % {
 -webkit-transform: übersetzen3d(-10px, 0, 0);
 transformieren: übersetzen3d(-10px, 0, 0);
 }

 20 %, 40 %, 60 %, 80 % {
 -webkit-transform: übersetzen3d(10px, 0, 0);
 transformieren: übersetzen3d(10px, 0, 0);
 }
}

@keyframes schütteln {
 von, bis
 -webkit-transform: übersetzen3d(0, 0, 0);
 transformieren: übersetzen3d(0, 0, 0);
 }

 10 %, 30 %, 50 %, 70 %, 90 % {
 -webkit-transform: übersetzen3d(-10px, 0, 0);
 transformieren: übersetzen3d(-10px, 0, 0);
 }

 20 %, 40 %, 60 %, 80 % {
 -webkit-transform: übersetzen3d(10px, 0, 0);
 transformieren: übersetzen3d(10px, 0, 0);
 }
}

.schütteln {
 -webkit-animation-name: schütteln;
 Animationsname: Shake;
}

<Stil>
 Körper {
  Rand: 0;
  /*Aktiviere das elastische Layout und richte die Unterelemente im elastischen Layout horizontal und vertikal in der Mitte aus*/
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  /*Text zentrieren*/
  Textausrichtung: zentriert;
  /*Farbverlauf für den Hintergrund festlegen*/
  Hintergrund: radialer Farbverlauf (Kreis, Nr. 444, Nr. 111, Nr. 000);
 }

 #char {
  Schriftgröße: 400px;
  Farbe: hellgrün;
  /*Textschatten setzen*/
  /*text-shadow: horizontale Position vertikale Position Unschärfe Abstand Schatten Farbe*/
  /*Position kann negativ sein*/
  Textschatten: 0 0 50px #666;
 }

 #Ergebnis {
  Schriftgröße: 20px;
  Farbe: #888;
 }

 /*Suche das Div-Element mit der ID char und dem Klassennamen error*/
 #char.error {
  Farbe: rot;
 }
</Stil>

<Skript>
// Definieren Sie eine Funktion: rand
// Parameter: minimale Ganzzahl, maximale Ganzzahl // Rückgabewert: eine zufällige Ganzzahl zwischen zwei Ganzzahlen Funktion rand(min, max) {
 gibt parseInt(Math.random() * (max - min + 1)) + min zurück;
} 
</Skript>

<Skript>
 // Das relevante Element abrufen var charDiv = document.getElementById('char');
 var resultDiv = document.getElementById('Ergebnis');

 // Code wird verwendet, um den Code der Buchstaben auf der Seite aufzuzeichnen. Verwenden Sie globale Variablen und Sie können ihn überall verwenden. var code, tirme;

 var rightNum = 0;//Richtige Zahl var wrongNum = 0;//Falsche Zahl // 1 Zeige den im Char-Div einzugebenden Buchstaben in Großbuchstaben an showChar();
 // 3 Tastenereignisse an das Dokument binden document.onkeyup = function (e) {
 // Ereignisobjekt e = window.event || e;
 // Schlüsselcode abrufen var keyCode = e.keyCode || e.which;
 // 4 Wenn der Eingabeinhalt mit dem Zeichen übereinstimmt, if (keyCode == code) {
  //Zeige die richtige Animation: animiertes ZoomIn
  charDiv.className = "animiertes ZoomIn";
  rechteNum++;
  Zeichen anzeigen()
 }
 // 5 Wenn der Eingabeinhalt nicht mit char übereinstimmt, sonst {
  // Fehleranimation anzeigen: animierter Shake-Fehler
  charDiv.className = "animierter Shake-Fehler";
  falscheZahl++
 }
 // Um ​​beim nächsten Mal eine Animation zu haben, entferne den Klassennamen, nachdem diese Animation beendet ist setTimeout(function () {
  charDiv.Klassenname = "";
 }, 500)
 // 6 Unabhängig davon, ob es richtig oder falsch ist, wird die Genauigkeitsrate im Ergebnis von Zeit zu Zeit aktualisiert // Genauigkeitsrate = richtige Zeiten / Gesamtzeiten resultDiv.innerHTML = "Genauigkeitsrate:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

 }
 // Funktion: Zufällige Anzeige der im Char-Div einzutragenden Buchstaben: uppercase function showChar() {
  // Zuerst zufällig einen Buchstabencode auswählen code = rand(65, 90);
  // In einen Buchstaben umwandeln var char = String.fromCharCode(code);
  // Im Char-Div anzeigen charDiv.innerHTML = char;
 }
</Skript>

<html>

<Kopf>
 <meta charset="utf-8">
 <title>Tippspiel</title>
 <!--Animationsbibliothek animate.css einführen-->
 <link rel="stylesheet" href="animate.css" >
 <Stil>
 Körper {
  Rand: 0;
  /*Aktiviere das elastische Layout und richte die Unterelemente im elastischen Layout horizontal und vertikal in der Mitte aus*/
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  /*Text zentrieren*/
  Textausrichtung: zentriert;
  /*Farbverlauf für den Hintergrund festlegen*/
  Hintergrund: radialer Farbverlauf (Kreis, Nr. 444, Nr. 111, Nr. 000);
 }

 #char {
  Schriftgröße: 400px;
  Farbe: hellgrün;
  /*Textschatten setzen*/
  /*text-shadow: horizontale Position vertikale Position Unschärfe Abstand Schatten Farbe*/
  /*Position kann negativ sein*/
  Textschatten: 0 0 50px #666;
 }

 #Ergebnis {
  Schriftgröße: 20px;
  Farbe: #888;
 }

 /*Suche das Div-Element mit der ID char und dem Klassennamenfehler*/
 #char.error {
  Farbe: rot;
 }
 </Stil>
</Kopf>

<Text>
 <mian>
 <div id="char">A</div>
 <div id="result">Bitte drücken Sie den auf dem Bildschirm angezeigten Buchstaben</div>
 </mian>
</body>

</html>
<Skript>
 // Definieren Sie eine Funktion: rand
 // Parameter: minimale Ganzzahl, maximale Ganzzahl // Rückgabewert: eine zufällige Ganzzahl zwischen zwei Ganzzahlen Funktion rand(min, max) {
 gibt parseInt(Math.random() * (max - min + 1)) + min zurück;
 }
</Skript>
<Skript>
 // Das relevante Element abrufen var charDiv = document.getElementById('char');
 var resultDiv = document.getElementById('Ergebnis');

 // Code wird verwendet, um den Code der Buchstaben auf der Seite aufzuzeichnen. Verwenden Sie globale Variablen und Sie können ihn überall verwenden. var code, tirme;

 var rightNum = 0;//Richtige Zahl var wrongNum = 0;//Falsche Zahl // 1 Zeige den im Char-Div einzugebenden Buchstaben in Großbuchstaben an showChar();
 // 3 Tastenereignisse an das Dokument binden document.onkeyup = function (e) {
 // Ereignisobjekt e = window.event || e;
 // Schlüsselcode abrufen var keyCode = e.keyCode || e.which;
 // 4 Wenn der Eingabeinhalt mit dem Zeichen übereinstimmt, if (keyCode == code) {
  //Zeige die richtige Animation: animiertes ZoomIn
  charDiv.className = "animiertes ZoomIn";
  rechteNum++;
  Zeichen anzeigen()
 }
 // 5 Wenn der Eingabeinhalt nicht mit char übereinstimmt, sonst {
  // Fehleranimation anzeigen: animierter Shake-Fehler
  charDiv.className = "animierter Shake-Fehler";
  falscheZahl++
 }
 // Um ​​beim nächsten Mal eine Animation zu haben, entferne den Klassennamen, nachdem diese Animation beendet ist setTimeout(function () {
  charDiv.Klassenname = "";
 }, 500)
 // 6 Unabhängig davon, ob es richtig oder falsch ist, wird die Genauigkeitsrate im Ergebnis von Zeit zu Zeit aktualisiert // Genauigkeitsrate = richtige Zeiten / Gesamtzeiten resultDiv.innerHTML = "Genauigkeitsrate:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

 }
 // Funktion: Zufällige Anzeige der im Char-Div einzutragenden Buchstaben: uppercase function showChar() {
  // Zuerst zufällig einen Buchstabencode auswählen code = rand(65, 90);
  // In einen Buchstaben umwandeln var char = String.fromCharCode(code);
  // Im Char-Div anzeigen charDiv.innerHTML = char;
 }
</Skript>