本文旨在解决JavaScript倒计时器中，由于变量未正确更新导致Alert框重复弹出的问题。通过分析问题代码，我们将提供详细的修改方案，确保倒计时器在用户未输入时间时，只弹出一次提示框，并在用户修改时间后正常启动或停止。此外，我们还将优化部分代码逻辑，提升代码的可读性和健壮性。
问题分析
原代码中，当用户点击“Start”按钮时，会检查hours、minutes和seconds变量是否都为0。如果都为0，则弹出“Input needed”的Alert框。然而，即使在弹出Alert框后，用户通过选择器修改了时间，这些变量的值并没有更新，导致下次点击“Start”按钮时，仍然会满足条件，从而重复弹出Alert框。
解决方案
问题的核心在于，在用户通过选择器修改时间后，需要及时更新hours、minutes和seconds变量的值。为此，我们需要在addEventListener("change", ...)中添加更新变量的逻辑。
代码修改
以下是修改后的代码片段，着重关注addEventListener("change", ...)部分：
立即学习“Java免费学习笔记（深入）”；
window.onload = function() {
// ... 其他代码 ...
let interval = null;
let hours = 0;
let minutes = 0;
let seconds = 0;
let i = true;
addEventListener("change", () => {
if (!(interval)) // 仅当倒计时未运行时才更新变量
{
hours = Number(hoursFromSelector.value);
minutes = Number(minutesFromSelector.value);
seconds = Number(secondsFromSelector.value);
}
mainclock.innerHTML = `${hoursFromSelector.value} : ${minutesFromSelector.value} : ${secondsFromSelector.value}`;
});
reseter.addEventListener("click", () => {
clearInterval(interval);
mainclock.innerHTML = "00 : 00 : 00";
hoursFromSelector.selectedIndex = 0;
minutesFromSelector.selectedIndex = 0;
secondsFromSelector.selectedIndex = 0;
starter.innerText = "Start";
hours = 0; // 重置变量
minutes = 0;
seconds = 0;
});
starter.addEventListener("click", () => {
if (hours == 0 && minutes == 0 && seconds == 0) {
starter.innerText = "Start";
clearInterval(interval)
alert("Input needed");
} else if (hours != 0 || minutes != 0 || seconds != 0) {
card.style.display = "none";
starter.innerText = "Stop";
if (!interval) {
hours = Number(hoursFromSelector.value);
minutes = Number(minutesFromSelector.value);
seconds = Number(secondsFromSelector.value);
interval = setInterval(regulSec, 1000);
} else {
clearInterval(interval);
interval = null;
starter.innerText = "Resume";
}
}
});
// ... 其他代码 ...
};修改说明：
- 变量更新: 在addEventListener("change", ...)中，我们添加了hours = Number(hoursFromSelector.value);、minutes = Number(minutesFromSelector.value);和seconds = Number(secondsFromSelector.value);，确保每次选择器值改变时，变量都得到更新。使用Number()进行类型转换，确保变量为数值类型，避免后续计算错误。
- 倒计时运行判断: 增加if (!(interval))判断，只有当倒计时没有运行的时候才更新变量，避免了在倒计时运行过程中修改时间导致的问题。
- Reset事件处理: 在reseter.addEventListener("click", ...)中，重置hours, minutes, seconds变量为0，确保下次启动的时候可以正确判断。
其他优化
parseInt vs Number: 虽然parseInt可以将字符串转换为整数，但Number更通用，可以处理更多情况，包括浮点数。因此，推荐使用Number进行类型转换。
-
confirm()返回值: confirm()函数返回一个布尔值，表示用户的选择。在quiter.addEventListener中，应该将confirm()的返回值赋给一个变量，并在if语句中使用该变量。
quiter.addEventListener("click", () => { const confirmed = confirm("Are you sure that you do not want to save your settings?"); if (confirmed) { card.style.display = "none"; hoursFromSelector.selectedIndex = 0; minutesFromSelector.selectedIndex = 0; secondsFromSelector.selectedIndex = 0; mainclock.innerHTML = "00 : 00 : 00"; } }); -
regulSec 优化: 优化了regulSec函数中的逻辑，使其更加简洁易懂。
function regulSec() { if (seconds > 0) { seconds--; } else if (seconds == 0 && minutes > 0) { minutes--; seconds = 59; } else if (seconds == 0 && minutes == 0 && hours > 0) { hours--; minutes = 59; seconds = 59; } if (hours == 0 && minutes == 0 && seconds == 0) { clearInterval(interval); starter.innerText = "Start"; // 倒计时结束时，重置按钮文本 } h = hours < 10 ? "0" + hours : hours; sec = seconds < 10 ? "0" + seconds : seconds; min = minutes < 10 ? "0" + minutes : minutes; mainclock.innerHTML = `${h} : ${min} : ${sec} `; }
完整代码
window.onload = function() {
//Card
const card = document.getElementById("card");
//Buttons
const editer = document.getElementById("editer");
const reseter = document.getElementById("reseter");
const x = document.getElementById("close-btn");
const starter = document.getElementById("starter");
const quiter = document.getElementById("quiter");
//"Select"-elements
const hoursFromSelector = document.getElementById("edt-hours");
const minutesFromSelector = document.getElementById("edt-minutes");
const secondsFromSelector = document.getElementById("edt-seconds");
//For calculation
const mainclock = document.getElementById("mainclock");
let interval = null;
let hours = 0;
let minutes = 0;
let seconds = 0;
let i = true;
addEventListener("change", () => {
if (!(interval))
{
hours = Number(hoursFromSelector.value);
minutes = Number(minutesFromSelector.value);
seconds = Number(secondsFromSelector.value);
}
mainclock.innerHTML = `${hoursFromSelector.value} : ${minutesFromSelector.value} : ${secondsFromSelector.value}`;
});
reseter.addEventListener("click", () => {
clearInterval(interval);
mainclock.innerHTML = "00 : 00 : 00";
hoursFromSelector.selectedIndex = 0;
minutesFromSelector.selectedIndex = 0;
secondsFromSelector.selectedIndex = 0;
starter.innerText = "Start";
hours = 0; // 重置变量
minutes = 0;
seconds = 0;
});
starter.addEventListener("click", () => {
if (hours == 0 && minutes == 0 && seconds == 0) {
starter.innerText = "Start";
clearInterval(interval)
alert("Input needed");
} else if (hours != 0 || minutes != 0 || seconds != 0) {
card.style.display = "none";
starter.innerText = "Stop";
if (!interval) {
hours = Number(hoursFromSelector.value);
minutes = Number(minutesFromSelector.value);
seconds = Number(secondsFromSelector.value);
interval = setInterval(regulSec, 1000);
} else {
clearInterval(interval);
interval = null;
starter.innerText = "Resume";
}
}
});
function regulSec() {
if (seconds > 0) {
seconds--;
}
else if (seconds == 0 && minutes > 0) {
minutes--;
seconds = 59;
}
else if (seconds == 0 && minutes == 0 && hours > 0) {
hours--;
minutes = 59;
seconds = 59;
}
if (hours == 0 && minutes == 0 && seconds == 0)
{
clearInterval(interval);
starter.innerText = "Start"; // 倒计时结束时，重置按钮文本
}
h = hours < 10 ? "0" + hours : hours;
sec = seconds < 10 ? "0" + seconds : seconds;
min = minutes < 10 ? "0" + minutes : minutes;
mainclock.innerHTML = `${h} : ${min} : ${sec} `;
}
//Functions without any actual mathematical reference
//Showing main-card
editer.addEventListener("click", () => {
if (i == true) {
card.style.display = "block";
i = false;
} else if (i == false) {
card.style.display = "none";
i = true;
}
});
//Closing-button for main-card
x.addEventListener("click", () => {
card.style.display = "none";
i = true;
});
quiter.addEventListener("click", () => {
const confirmed = confirm("Are you sure that you do not want to save your settings?");
if (confirmed) {
card.style.display = "none";
hoursFromSelector.selectedIndex = 0;
minutesFromSelector.selectedIndex = 0;
secondsFromSelector.selectedIndex = 0;
mainclock.innerHTML = "00 : 00 : 00";
hours = 0; // 重置变量
minutes = 0;
seconds = 0;
}
});
};总结
通过及时更新变量值，并优化代码逻辑，我们成功解决了JavaScript倒计时器中Alert框重复弹出的问题。 同时，我们也学习了如何使用Number进行类型转换，以及如何正确处理confirm()函数的返回值。 希望本文能帮助你更好地理解JavaScript事件处理和变量管理，并提升你的前端开发技能。
