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

【问题标题】：How to add a word per minute calculator to a website using Javascript, html, or css?如何使用 Javascript、html 或 css 将每分钟单词计算器添加到网站？
【发布时间】：2021-01-25 03:46:06
【问题描述】：

我尝试完成一个打字测试网站已经有一段时间了，但一直在思考如何添加每分钟单词计数器。我尝试了多种方法，但都没有奏效。我想要它做的是在用户正确输入提示后每分钟给出单词。代码如下：

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：

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';
}

感谢您的帮助！

伊尔凡

【问题讨论】：

你能说得更具体点吗？你尝试了什么？什么不起作用？您提供了很多代码，但是当我阅读您的问题时，样式表不应该是相关的，例如
您的 HTML 没有<BODY>
我尝试使用来自geeksforgeeks.org/… 的一些代码，但它不起作用。我删除了 CSS。我也是 javascript 新手。
您如何定义“每分钟字数”？您的意思是跟踪键入每个单词然后除以单词数所需的时间吗？您预期的打字算法是什么？什么应该触发打字的开始和结束以及什么定义了“单词”？ “a”是单词还是“do”？
每分钟字数的定义是一个人在 60 秒内可以输入多少字。我真的不知道该使用什么算法，因为其中的单词量太少了。

标签： javascript html jquery css web

【解决方案1】：

您可以尝试在第一次按下某个键时将当前时间戳存储在一个变量中。然后，当用户完成后，获取当前时间戳与开始时存储的时间戳之间的差异。接下来，您必须计算经过的时间并将其转换为每分钟的字数。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now

为避免使用多个 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"/>

【讨论】：

除非你正在创建一个全新的元素，否则不要使用on 处理程序。请改用 addEventListener。

【解决方案2】：

考虑以下示例。

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

这需要类似的代码，并向您展示如何计算用户输入单词所需的时间。由于单词太少，它不会计算 WPM。您可以考虑外推比率。字数 * 60 / 秒。

这个答案使用 jQuery。如果您愿意，您也可以使用 JavaScript 来执行此操作。

【讨论】：

谢谢，但它不起作用。我尝试用这个替换我的代码，但没有一个功能可以工作。
@IrfanS 你是否在脑海中添加了 jQuery 库？如果仍有问题，请更新您的原始帖子 (OP)。