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

Question

Iv'e been trying to complete a typing test website for some time and am stuck on how to add a word per minute counter.一段时间以来，我一直在尝试完成一个打字测试网站，但一直停留在如何添加每分钟单词计数器的问题上。 I have tried multiple ways but none of them work.我尝试了多种方法，但都没有奏效。 What I want it do do is give the words per minute after the user types a prompt correctly.我想要它做的是在用户正确输入提示后每分钟给出单词。 Code is below:代码如下：

HTML: HTML：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<h1>
   <span id="word-1">man</span> <span id="word-2">become</span> <span id="word-3">as</span>
   <span id="word-4">and</span> <span id="word-5">through</span> <span id="word-6">find</span> <span id="word-7">would</span> <span id="word-8">here</span> <span id="word-9">and</span> <span id="word-10">before</span>
</h1>

<input type="text" id="boch">

        </div>
        <div id="typing-area">

      <button id="bocho" onclick="document.getElementById('boch').value = ''">Enter</button>

</html>
<script src="main.js"></script>

JavaScript: JavaScript：

var input = document.getElementById("boch");
input.addEventListener("keyup", function (event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    document.getElementById("bocho").click();
  }
});


var element = document.querySelector("#boch");

element.onkeyup = function () {
  var value = element.value;

  if (value.includes("man")) {
    document.getElementById('word-1').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-1').style.backgroundColor = 'transparent';
  }

  if (value.includes("man become")) {
    document.getElementById('word-2').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-2').style.backgroundColor = 'transparent';
  }

  if (value.includes("man become as")) {
    document.getElementById('word-3').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-3').style.backgroundColor = 'transparent';
  }

  if (value.includes("man become as and")) {
    document.getElementById('word-4').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-4').style.backgroundColor = 'transparent';
  }

  if (value.includes("man become as and through")) {
    document.getElementById('word-5').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-5').style.backgroundColor = 'transparent';
  }

  if (value.includes("man become as and through find")) {
    document.getElementById('word-6').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-6').style.backgroundColor = 'transparent';
  }

  if (value.includes("man become as and through find would")) {
    document.getElementById('word-7').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-7').style.backgroundColor = 'transparent';
  }

  if (value.includes("man become as and through find would here")) {
    document.getElementById('word-8').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-8').style.backgroundColor = 'transparent';
  }

  if (value.includes("man become as and through find would here and")) {
    document.getElementById('word-9').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-9').style.backgroundColor = 'transparent';
  }

  if (value.includes("man become as and through find would here and before")) {
    document.getElementById('word-10').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-10').style.backgroundColor = 'transparent';
  }

 

}
let tagArr = document.getElementsByTagName("input");
for (let i = 0; i < tagArr.length; i++) {
  tagArr[i].autocomplete = 'off';
}

Thank you for the help!感谢您的帮助！

Irfan伊尔凡

Answer 1

You can try to store the current timestamp in a variable when a key is pressed for the first time.您可以尝试在第一次按下某个键时将当前时间戳存储在一个变量中。 Then, when the user have finish, get the difference between the current timestamp and the timestamp stored at the start.然后，当用户完成后，获取当前时间戳与开始时存储的时间戳之间的差异。 Next, you have to calculate the elapsed time and convert it to words per minute.接下来，您必须计算经过的时间并将其转换为每分钟的字数。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now

To avoid your multiple if-else structures, you can split the string by spaces, then compare word by word in a for loop.为避免使用多个 if-else 结构，您可以用空格分割字符串，然后在 for 循环中逐字比较。

 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"/>

Answer 2

Consider the following example.考虑以下示例。

 $(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>

This takes similar code and shows you how you can calculate the time it takes the User to type the words.这需要类似的代码，并向您展示如何计算用户输入单词所需的时间。 It will not calculate the WPM since there are too few words.由于单词太少，它不会计算 WPM。 You might consider extrapolating the ratio.您可以考虑外推比率。 Words * 60 / Seconds.字数 * 60 / 秒。

This answer uses jQuery.这个答案使用 jQuery。 You can use JavaScript to do this as well if you choose.如果您愿意，您也可以使用 JavaScript 来执行此操作。

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2021-01-23 00:56:46

解决方案2
0 2021-01-23 01:07:43

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2021-01-23 00:56:46

解决方案2 0 2021-01-23 01:07:43

解决方案1
0 已采纳 2021-01-23 00:56:46

解决方案2
0 2021-01-23 01:07:43