本文档旨在解决 JavaScript 计时器在处理秒数时遇到的问题，尤其是在从倒计时切换到正计时模式后。通过分析问题代码，我们将深入探讨 `parseInt()` 函数的特性以及如何正确地从计时器元素中提取分钟和秒数，并提供修复后的代码示例，确保计时器能够准确运行。
问题分析
原始代码在获取计时器上限值 limit 时，直接使用 parseInt() 函数解析包含分钟和秒数的字符串（例如 "00:30"）。parseInt() 函数的特性是，当遇到非数字字符时，会停止解析，只返回该字符之前的部分。因此，当计时器设置为小于 1 分钟的值时，limit 总是被解析为 0，导致计时器立即停止。
解决方案
为了解决这个问题，我们需要将分钟和秒数分别提取出来，并将它们转换为以分钟为单位的值，然后将它们相加，得到正确的 limit 值。
代码示例
以下是修复后的 startTimer() 函数：
立即学习“Java免费学习笔记（深入）”；
function startTimer() {
startTime = new Date();
let time = document.getElementById("timer").innerHTML.split(":");
limit = parseInt(time[0]) + parseInt(time[1])/60;
clearInterval(timer);
timer = setInterval(updateTime, 1000);
}代码解释：
- document.getElementById("timer").innerHTML.split(":"): 首先，我们使用 split(":") 方法将计时器元素的文本内容（例如 "01:30"）分割成一个包含两个元素的数组 time，分别代表分钟和秒数。
- parseInt(time[0]) + parseInt(time[1])/60: 然后，我们使用 parseInt() 函数将分钟和秒数转换为整数。并将秒数除以 60，将其转换为分钟。最后，我们将分钟数和转换后的秒数相加，得到以分钟为单位的 limit 值。
完整代码
以下是包含修复后的 startTimer() 函数的完整 JavaScript 代码：
window.addEventListener('DOMContentLoaded', documentLoaded, false);
var startTime;
var limit;
var timer;
function documentLoaded() {
"use strict";
var timerElement = document.getElementById("timer");
timerElement.addEventListener("keydown", function (event) {
if (event.key === 'Enter') {
event.preventDefault();
startTimer();
timerElement.blur();
}
});
}
function startTimer() {
startTime = new Date();
let time = document.getElementById("timer").innerHTML.split(":");
limit = parseInt(time[0]) + parseInt(time[1])/60;
clearInterval(timer);
timer = setInterval(updateTime, 1000);
}
function updateTime() {
var currentTime = new Date();
var elapsed = (currentTime.getTime() - startTime.getTime()) / 1000;
var minutes = Math.floor(elapsed / 60);
var seconds = Math.floor(elapsed % 60);
if (minutes < 10) {
minutes = "0" + minutes;
}
if (seconds < 10) {
seconds = "0" + seconds;
}
document.getElementById("timer").innerHTML = minutes + ":" + seconds;
var totalSeconds = minutes * 60 + seconds;
if (totalSeconds >= limit * 60) {
document.getElementById("timer").classList.add("red");
clearInterval(timer); // Stop the timer
} else {
document.getElementById("timer").classList.remove("red");
}
}相应的 HTML 和 CSS 代码保持不变：
Ejercio No. 3 00:00
body {
display: flex;
justify-content: center;
align-items: center;
}
#timer-container {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #0781D4;
display: flex;
justify-content: center;
align-items: center;
}
#timer {
font-size: 36px;
text-align: center;
}
.red {
background-color: red;
}注意事项
- 确保计时器元素的文本内容格式始终为 "MM:SS"，其中 MM 代表分钟，SS 代表秒数。
- 在实际应用中，你可能需要添加输入验证，以确保用户输入的是有效的分钟和秒数。
- 可以考虑使用更精确的时间计算方法，例如 performance.now()，以提高计时器的精度。
总结
通过将分钟和秒数分别提取出来并进行计算，我们成功修复了 JavaScript 计时器在处理秒数时遇到的问题。这个例子也提醒我们，在使用 JavaScript 内置函数时，需要充分了解其特性，避免出现意想不到的错误。希望本教程能够帮助你更好地理解 JavaScript 计时器的实现原理，并解决类似的问题。
