时间戳

首页 > 解决方案 > Javascript计时器倒计时

javascript - Javascript计时器倒计时

问题描述

我在 JS 中有一个属于测验的 1:30 分钟计时器。在测验中，如果用户选择了错误的答案，则计时器会被扣 10 秒。那部分正在工作。但是，当计时器到达 1:00 时，它会重新开始到 1:59 秒，并且实际上从未低于 1 分钟。

function startTimer() {
  var p_time = document.getElementById('time').innerHTML;
  var timeArray = p_time.split(/[:]+/);
  var min = timeArray[0];
  var sec = checkSecond((timeArray[1] - 1));
  if (sec === 59) {
    min = min - 1
  }

  document.getElementById('time').innerHTML = min + ":" + sec;

  if (min <= 0 && sec == 0) {
    clearTimeout(timerRef)
    alert("Time is up!")
    return;
  }

  if(min === 1 && sec === 0) {
    min = 0;
  }
  setTimeout(startTimer, 1000);
}

function checkSecond(seconds) {
  if (seconds < 10 && seconds >= 0) {
    seconds = "0" + seconds
  };
  if (seconds < 0) {
    seconds = "59"
  };
  return seconds;
}

function wrongTimer () {
  var x_time = document.getElementById('time').innerHTML;
  var wrongArray = x_time.split(/[:]+/);
  var x_min = wrongArray[0];
  var x_sec = checkSecond((wrongArray[1]-1));
  if(x_sec === 59) {
    x_min = x_min - 1
  }
  x_sec -= 10;
  console.log(document.getElementById('time').innerHTML);
  console.log("sec " + x_sec);
  document.getElementById('time').innerHTML = x_min + ":" + x_sec;
}

我稍后在我的代码中调用了 wrongTimer 函数（未显示）。即使在可能的扣除之后，如何让计时器继续倒计时？

JS 测验

标签： javascripthtmlcss

解决方案

问题是(sec === 59)，您正在检查是否sec是59（数字），但是sec是"59"（字符串）。

您可以将字符串解析为数字，只需检查是否sec为字符串"59"。

我刚刚在下面的示例中完成了后者，工作片段：

function startTimer() {
  var p_time = document.getElementById("time").innerHTML;
  var timeArray = p_time.split(/[:]+/);
  var min = timeArray[0];
  var sec = checkSecond(timeArray[1] - 1);
  if (sec === "59") { // <- the fix
    min = min - 1;
  }

  document.getElementById("time").innerHTML = min + ":" + sec;

  if (min <= 0 && sec == 0) {
    clearTimeout(timerRef);
    alert("Time is up!");
    return;
  }

  if (min === 1 && sec === 0) {
    min = 0;
  }
  var timerRef = setTimeout(startTimer, 1000);
}

function checkSecond(seconds) {
  if (seconds < 10 && seconds >= 0) {
    seconds = "0" + seconds;
  }
  if (seconds < 0) {
    seconds = "59";
  }
  return seconds;
}

function wrongTimer() {
  var x_time = document.getElementById("time").innerHTML;
  var wrongArray = x_time.split(/[:]+/);
  var x_min = wrongArray[0];
  var x_sec = checkSecond(wrongArray[1] - 1);
  if (x_sec === 59) {
    x_min = x_min - 1;
  }
  x_sec -= 10;
  console.log(document.getElementById("time").innerHTML);
  console.log("sec " + x_sec);
  document.getElementById("time").innerHTML = x_min + ":" + x_sec;
}

startTimer();
<div id="time">1:05</div>

推荐阅读