Question

＆＃13;

var score = 0,
  time = 10;

window.onload = function() {

  var input = document.getElementById("wordTyped");
  var timeLeft = document.getElementById("time");

  input.addEventListener("click", timer, false);

  function timer() {
    var id = setInterval(countdown, 10);

    function countdown() {
      input.removeEventListener("click", timer, false);
      timeLeft.innerHTML = "Time left: " + (time - 0.01).toFixed(2) + "s";
      time = (time - 0.01).toFixed(2);

      if (time == 0) {
        clearInterval(id);
      }

      if (time == 7) {
        // The issue | it works if I assigned 10 to time but not for addition"
        time += 10;
      }
    }
  }

}

＆＃13;

<input id="wordTyped" type="text" />
<div id="time">Time left: 10.00s</div>

＆＃13;

我上面写的代码相当直接，但它的工作方式并不像我期望的那样。

如果单击输入，则启动计时器和如果 time == 7（为了测试，我给出时间等于7的条件），添加10时间，但它没有添加并继续递减，直到它达到零setInterval被清除

Answer 1

分配给toFixed()时请勿使用time。返回一个字符串，而不是一个数字，因此time += 10执行字符串连接，而不是添加。仅在显示时间时使用它，而不是在代码中存储时间变量。

但是，如果将time保留为数字，浮点不准确可能会导致time == 7永远不为真。您应该测试它是否接近7：

if (Math.abs(time - 7) < 0.005)

Answer 2

@epascarello，感谢您的澄清，希望我能对您的评论进行投票。

如果toFixed()将其设置为字符串，那么所有需要做的就是将其恢复为数字类型。

所以我改变了

time = (time - 0.01).toFixed(2);

到

time = 1 * (time - 0.01).toFixed(2);

Javascript计时器使用setInterval（）onclick并添加持续时间，如果条件满足

2 个答案: