问如何使用Javascript、html或css向网站添加每分钟单词计算器？

EN

const string = "man become as and through find would here and before";

var text = document.getElementById("text");
var input = document.getElementById("input");

var start = null;
var finished = false;

// Split the string to an array of words
var words = string.split(" ");

text.innerHTML = "";
// For each word, add it as a span element in the text
words.forEach(w => {
    let el = document.createElement("span");
    el.innerText = w;
    text.appendChild(el);
    text.innerHTML += " ";
});

input.addEventListener("keyup", () => {
    // Split the input to an array of words
    let input_words = input.value.split(" ");
    let good = true;

    if (finished)
        return;
    if (!start)
        start = Date.now();

    // Iterate over all the words
    for (let i = 0; i < words.length; i++) {
        let element = words[i];
        // If the word is not the same as the word at same position in the input, set 'good' at false
        if (input_words[i] != element)
            good = false;
        // Set the background color for the word, selecting the element
        // by the parent's children index (corresponding to i) to avoid the usage of ids
        text.children[i].style.backgroundColor = good ? "green" : null;
    }
    // If all words are correct, the variable is still true
    if (good)
    {
        finished = true;
        // Get the difference in seonds between start and now
        let elapsed = (Date.now() - start) / 1000;
        // Get words per seconde
        let words_per_seconde = words.length * 60 / elapsed;
        // Round to the fourth decimal
        words_per_seconde = Math.round(words_per_seconde * 1000) / 1000;
        alert(words_per_seconde + " words per minute.");
    }
});

<h1 id="text"></h1>
<input type="text" autocomplete="off" id="input"/>

$(function() {
  var start, end, elapsed;

  function split(str) {
    return str.split(" ");
  }

  function compWords(a, b) {
    $.each(a, function(i, w) {
      console.log(w, b.eq(i).text());
      if (w == b.eq(i).text()) {
        $(".word").eq(i).removeClass("incorrect").addClass("correct");
      } else {
        $(".word").eq(i).removeClass("correct").addClass("incorrect");
      }
    });
  }

  function showTime(ms) {
    var minutes = Math.floor(ms / 60000);
    var seconds = ((ms % 60000) / 1000).toFixed(0);
    var result = minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
    var wordLength = $(".word").length
    alert(result + " to type " + wordLength + " words. " + $(".word.correct").length + " correct. " + Math.round(wordLength * 60 / seconds) + " WPM");
  }

  $("#boch").keydown(function(e) {
    if ($(this).val().length == 1) {
      start = Date.now();
      $(".word").removeClass("correct incorrect");
    }
  }).keyup(function(e) {
    var typed = $(this).val();
    compWords(split(typed), $(".word"));
  });

  $("#bocho").click(function() {
    if (start != undefined) {
      end = Date.now();
      elapsed = end - start;
      showTime(elapsed);
    }
  });

  $("#typing-area form").submit(function(e) {
    e.preventDefault();
    $("#bocho").click();
  });
});

.word {
  padding: .025em;
}

.word.correct {
  background-color: #cfc;
}

.word.incorrect {
  background-color: #fcc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
  <span class="word">man</span> <span class="word">become</span> <span class="word">as</span>
  <span class="word">and</span> <span class="word">through</span> <span class="word">find</span> <span class="word">would</span> <span class="word">here</span> <span class="word">and</span> <span class="word">before</span>
</h1>
<div id="typing-area">
  <form>
    <input type="text" id="boch" autocomplete="off" />
    <button id="bocho">Enter</button>
  </form>
</div>