0

我试图计算从用户开始输入到他们停止输入的时间。我将两个变量开始和结束，然后将它们相减。但它总是返回零。如果可能的话，你能给出一个简单的方法来计算 wpm 吗？当用户正确输入 10 个单词时，我想最终计算每分钟的单词数。所以我需要从他们开始到他们完成提示的时间。

谢谢！

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("m")) {
     var start = Date.now();
  } 

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

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

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

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

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

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

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

  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 = "red";
  }

  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 = "red";
  }

  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 = "red";
  }

   if (value.includes("man become as and through find would here and before")) {
     var end = Date.now();
 
  }
  let millis = end-start;

  console.log(millis)

  
}

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" autocomplete="off">

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

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

</html>




<script src="main.js"></script>```
4

1 回答 1

1

首先，value.includes("m")每次都为真，因此每次触发函数时计时器都会重新启动。相反，使用value === "m"：

if (value === "m") {
  start = Date.now();
}

您需要在语句之外声明var endand并将其设置在内部：var startif

var start;
if (value === "m") {
  start = Date.now();
}
// other code...
var end;
if (value.includes("man become as and through find would here and before")) {
  end = Date.now();
}
let millis = end-start;

end另外，我建议在and之间放置一个空格start。end-start可以是变量名。

于 2021-01-23T20:03:59.250 回答