17370845950

本文档旨在解决 JavaScript 计时器在处理秒数时遇到的问题，尤其是在从倒计时切换到正计时模式后。通过分析问题代码，我们将深入探讨 `parseInt()` 函数的特性以及如何正确地从计时器元素中提取分钟和秒数，并提供修复后的代码示例，确保计时器能够准确运行。

问题分析

原始代码在获取计时器上限值 limit 时，直接使用 parseInt() 函数解析包含分钟和秒数的字符串（例如 "00:30"）。parseInt() 函数的特性是，当遇到非数字字符时，会停止解析，只返回该字符之前的部分。因此，当计时器设置为小于 1 分钟的值时，limit 总是被解析为 0，导致计时器立即停止。

解决方案

为了解决这个问题，我们需要将分钟和秒数分别提取出来，并将它们转换为以分钟为单位的值，然后将它们相加，得到正确的 limit 值。

代码示例

以下是修复后的 startTimer() 函数：

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);
}

代码解释：

1. document.getElementById("timer").innerHTML.split(":"): 首先，我们使用 split(":") 方法将计时器元素的文本内容（例如 "01:30"）分割成一个包含两个元素的数组 time，分别代表分钟和秒数。
2. 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 代码保持不变：

  
  
  


  
    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 计时器的实现原理，并解决类似的问题。