1. 构建基础实时倒计时器
首先，我们需要一个html元素来显示计时器，以及一段javascript代码来驱动它。
HTML 结构:
创建一个简单的 div 元素，并为其指定一个类名，例如 timer，以便JavaScript能够选中它。
<div class="timer"></div>
JavaScript 核心逻辑:
以下JavaScript代码将创建一个从10:00开始倒计时的计时器，每秒更新一次显示。
立即学习“Java免费学习笔记（深入）”；
var timerElements = document.getElementsByClassName("timer"); // 获取显示计时器的HTML元素集合
var timerDisplay = timerElements[0]; // 假设只有一个计时器元素
var totalSeconds = 600; // 初始总秒数，例如 10分钟 = 600秒
var elapsedSeconds = 0; // 已过去的时间计数器
// 检查计时器元素是否存在
if (!timerDisplay) {
console.error("计时器元素未找到！请确保HTML中存在 class 为 'timer' 的元素。");
} else {
// 启动计时器，每秒调用一次 updateTimer 函数
var myInterval = setInterval(updateTimer, 1000);
}
function updateTimer() {
let remainingSeconds = totalSeconds - elapsedSeconds; // 计算剩余秒数
let minutes = Math.floor(remainingSeconds / 60); // 计算剩余分钟
let seconds = remainingSeconds % 60; // 计算剩余秒数
// 格式化显示，确保秒数不足10时前面有0
let formattedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
timerDisplay.innerHTML = `${minutes}:${formattedSeconds}`;
// 当剩余秒数小于等于0时，停止计时器
if (remainingSeconds <= 0) {
clearInterval(myInterval);
timerDisplay.innerHTML = "0:00"; // 确保最终显示为 0:00
return; // 停止函数执行，避免 elapsedSeconds 增加和后续操作
}
elapsedSeconds++; // 增加已过去的时间
}这段代码通过 setInterval 每秒执行 updateTimer 函数。在 updateTimer 中，我们计算剩余的分钟和秒数，并更新 div.timer 的 innerHTML。当剩余秒数用尽时，clearInterval 停止计时器。
2. 实现特定时间点字体颜色动态变化
我们的目标是在计时器达到 0:59 时，将字体颜色变为红色。这可以通过在 updateTimer 函数内部添加一个条件判断来实现。
核心思路:
在每次更新计时器显示之前或之后，检查当前的剩余秒数。如果剩余秒数等于我们想要触发变化的时间点（例如59秒，对应0:59），就修改元素的样式。
修改后的JavaScript代码:
var timerElements = document.getElementsByClassName("timer");
var timerDisplay = timerElements[0];
var totalSeconds = 600; // 初始总秒数，例如 10分钟 = 600秒
var elapsedSeconds = 0;
if (!timerDisplay) {
console.error("计时器元素未找到！请确保HTML中存在 class 为 'timer' 的元素。");
} else {
var myInterval = setInterval(updateTimer, 1000);
}
function updateTimer() {
let remainingSeconds = totalSeconds - elapsedSeconds; // 计算剩余秒数
let minutes = Math.floor(remainingSeconds / 60);
let seconds = remainingSeconds % 60;
// 格式化显示
let formattedSeconds = seconds < 10 ? `0${seconds}` : `${seconds}`;
timerDisplay.innerHTML = `${minutes}:${formattedSeconds}`;
// === 核心功能：在剩余59秒时改变字体颜色 ===
if (remainingSeconds === 59) {
timerDisplay.style.color = "red"; // 将字体颜色设置为红色
}
// ======================================
// 当剩余秒数小于等于0时，停止计时器
if (remainingSeconds <= 0) {
clearInterval(myInterval);
timerDisplay.innerHTML = "0:00";
// 计时器停止时，字体颜色保持红色（如果已变红）
return;
}
elapsedSeconds++; // 增加已过去的时间
}在上述代码中，我们添加了以下关键行：
if (remainingSeconds === 59) {
timerDisplay.style.color = "red"; // 将字体颜色设置为红色
}这行代码会在每次 updateTimer 函数执行时检查 remainingSeconds 的值。一旦 remainingSeconds 等于 59（即计时器显示为 0:59），它就会将 timerDisplay 元素的字体颜色设置为红色。
3. 代码解析与注意事项
- **totalSeconds
