JavaScript typing game

<mian>
 <div id="char">A</div>
 <div id="result">Please press the letter displayed on the screen</div>
</mian>

/*animate.css*/
.animated {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}

.animated.infinite {
 -webkit-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
}

.animated.hinge {
 -webkit-animation-duration: 2s;
 animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
 -webkit-animation-duration: .75s;
 animation-duration: .75s;
}
@-webkit-keyframes zoomIn {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
 }

 50% {
 opacity: 1;
 }
}

@keyframes zoomIn {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
 }

 50% {
 opacity: 1;
 }
}

.zoomIn {
 -webkit-animation-name: zoomIn;
 animation-name: zoomIn;
}
  .animated {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
@-webkit-keyframes shake {
 from, to
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }

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

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

@keyframes shake {
 from, to
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }

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

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

.shake {
 -webkit-animation-name: shake;
 animation-name: shake;
}

<style>
 body {
  margin: 0;
  /*Turn on the elastic layout and align the sub-elements in the elastic layout horizontally and vertically in the center*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*Center the text*/
  text-align: center;
  /*Set the background color gradient*/
  background: radial-gradient(circle, #444, #111, #000);
 }

 #char {
  font-size: 400px;
  color: lightgreen;
  /*Set text shadow*/
  /*text-shadow: horizontal position vertical position blur distance shadow color*/
  /*Position can be negative*/
  text-shadow: 0 0 50px #666;
 }

 #result {
  font-size: 20px;
  color: #888;
 }

 /*Find the div element with id char and class name error*/
 #char.error {
  color: red;
 }
</style>

<script>
// Define a function: rand
// Parameters: minimum integer, maximum integer // Return: a random integer between two integers function rand(min, max) {
 return parseInt(Math.random() * (max - min + 1)) + min;
} 
</script>

<script>
 // Get the relevant element var charDiv = document.getElementById('char');
 var resultDiv = document.getElementById('result');

 // code is used to record the code of the letters on the page. Use global variables and you can use it everywhere. var code, tirme;

 var rightNum = 0;//Correct number var wrongNum = 0;//Wrong number // 1 Display the letter to be entered in the char div, in uppercase showChar();
 // 3 Bind key events to the document document.onkeyup = function (e) {
 // Event object e = window.event || e;
 // Get the key code var keyCode = e.keyCode || e.which;
 // 4 If the input content is consistent with the char if (keyCode == code) {
  // Display the correct animation: animated zoomIn
  charDiv.className = "animated zoomIn";
  rightNum++;
  showChar()
 }
 // 5 If the input content is inconsistent with char else {
  // Display error animation: animated shake error
  charDiv.className = "animated shake error";
  wrongNum++
 }
 // In order to have animation next time, remove the class name after this animation is finished setTimeout(function () {
  charDiv.className = "";
 }, 500)
 // 6 Whether it is correct or wrong, the accuracy rate in result is updated from time to time // Accuracy rate = correct times / total times resultDiv.innerHTML = "Accuracy rate:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

 }
 // Function: Randomly display the letters to be entered in the char div: uppercase function showChar() {
  // First randomly select a letter code code = rand(65, 90);
  // Convert to a letter var char = String.fromCharCode(code);
  // Display in the char div charDiv.innerHTML = char;
 }
</script>

<html>

<head>
 <meta charset="utf-8">
 <title>Typing Game</title>
 <!--Introduce animate.css animation library-->
 <link rel="stylesheet" href="animate.css" >
 <style>
 body {
  margin: 0;
  /*Turn on the elastic layout and align the sub-elements in the elastic layout horizontally and vertically in the center*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*Center the text*/
  text-align: center;
  /*Set the background color gradient*/
  background: radial-gradient(circle, #444, #111, #000);
 }

 #char {
  font-size: 400px;
  color: lightgreen;
  /*Set text shadow*/
  /*text-shadow: horizontal position vertical position blur distance shadow color*/
  /*Position can be negative*/
  text-shadow: 0 0 50px #666;
 }

 #result {
  font-size: 20px;
  color: #888;
 }

 /*Find the div element with id char and class name error*/
 #char.error {
  color: red;
 }
 </style>
</head>

<body>
 <mian>
 <div id="char">A</div>
 <div id="result">Please press the letter displayed on the screen</div>
 </mian>
</body>

</html>
<script>
 // Define a function: rand
 // Parameters: minimum integer, maximum integer // Return: a random integer between two integers function rand(min, max) {
 return parseInt(Math.random() * (max - min + 1)) + min;
 }
</script>
<script>
 // Get the relevant element var charDiv = document.getElementById('char');
 var resultDiv = document.getElementById('result');

 // code is used to record the code of the letters on the page. Use global variables and you can use it everywhere. var code, tirme;

 var rightNum = 0;//Correct number var wrongNum = 0;//Wrong number // 1 Display the letter to be entered in the char div, in uppercase showChar();
 // 3 Bind key events to the document document.onkeyup = function (e) {
 // Event object e = window.event || e;
 // Get the key code var keyCode = e.keyCode || e.which;
 // 4 If the input content is consistent with the char if (keyCode == code) {
  // Display the correct animation: animated zoomIn
  charDiv.className = "animated zoomIn";
  rightNum++;
  showChar()
 }
 // 5 If the input content is inconsistent with char else {
  // Display error animation: animated shake error
  charDiv.className = "animated shake error";
  wrongNum++
 }
 // In order to have animation next time, remove the class name after this animation is finished setTimeout(function () {
  charDiv.className = "";
 }, 500)
 // 6 Whether it is correct or wrong, the accuracy rate in result is updated from time to time // Accuracy rate = correct times / total times resultDiv.innerHTML = "Accuracy rate:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

 }
 // Function: Randomly display the letters to be entered in the char div: uppercase function showChar() {
  // First randomly select a letter code code = rand(65, 90);
  // Convert to a letter var char = String.fromCharCode(code);
  // Display in the char div charDiv.innerHTML = char;
 }
</script>