本教程详细指导如何使用JavaScript创建一个实时倒计时器，并实现在特定时间点（例如倒计时至0:59时）动态改变计时器字体颜色的功能。通过在计时函数中添加条件判断，精确控制样式变化，提升用户体验。
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
评论（已关闭）
评论已关闭