本文旨在解决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事件处理和变量管理，并提升你的前端开发技能。