Javascript计时器倒计时

Question

我在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;
}

稍后我将在代码中调用错误计时器函数(未显示(。如何使计时器即使在可能的扣除后仍继续倒计时？

JS测验

Answer 1

问题是(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>

Answer 2

您使用严格的比较运算符===进行比较，只有当两个元素具有相同的值并且属于相同的类型时，才会返回true。问题是您的seconds变量是一个字符串，因此与int的比较将返回false，而不管值是多少。

我应用了一些其他修复并删除了一些不必要的代码，请查看以下内容：

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
}
if (min < 0) {
clearTimeout(timerRef)
alert("Time is up!")
return;
}
document.getElementById('time').innerHTML = min + ":" + sec;

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:10</div>

Answer 3

重构代码可能会更好，这样内存中就会有一个计数器来跟踪计时器应该有多少秒(即从2分钟开始时为120秒，到1分钟时降至60秒(。这种设置将更容易编码到用户体验友好计时器(MM:SS(中，因为您将始终以一种方式进行转换，对该代码的任何添加或扣除都将简单地进行到该计数器中，然后在UI中向下流到您的转换中。

现在，您正在查找HTML中剩余的时间，去掉时间段(去掉秒和分钟(，然后进行所有的推导。这需要比实际需要更多的计算。这也让从1点到0点59分真的很痛苦。

尽管如此，应该提醒您，如果您在客户端上跟踪这个计数器变量，它可能会被聪明的人操纵，给他们比预期更多的时间。无论是在这个解决方案中还是在另一个解决方案中，您都必须小心如何确保计时器的完整性。