如何用JavaScript实现计时器到0:59时字体变为红色？

以下是修改后的代码，可实现倒计时到0:59时将字体改为红色的需求，同时修复了原代码中定时器结束逻辑的问题：

修改后的JavaScript代码 #

var time = document.getElementsByClassName("timer")[0]; // 直接获取第一个元素，简化后续调用
var timings = 600; // 总时长10分钟（600秒）
var i = 0;
var myInterval = setInterval(Timeout, 1000);

function Timeout() {
  var remaining = timings - i;
  var minutes = parseInt(remaining / 60);
  var seconds = remaining % 60;
  
  // 格式化时间显示
  time.innerHTML = seconds >= 10 ? `${minutes}:${seconds}` : `${minutes}:0${seconds}`;
  
  // 设置字体颜色：仅当显示0:59时改为红色，其余时间恢复默认
  time.style.color = remaining === 59 ? 'red' : '';
  
  i++;
  
  // 剩余时间为0时停止定时器
  if (remaining <= 0) {
    clearInterval(myInterval);
  }
}

HTML代码（保持不变） #

<div class="timer"></div>

关键修改说明 #

• 简化元素获取：初始化时直接取出第一个.timer元素，避免重复使用time[0]，减少代码冗余。
• 统一剩余时间计算：新增remaining变量集中处理剩余时长，让逻辑更清晰，避免重复计算。
• 精准颜色控制：通过判断remaining === 59（对应显示0:59）触发字体变色，其余时间恢复默认样式。
• 修复停止逻辑：原代码的停止条件不准确，改为剩余时间≤0时终止定时器，确保倒计时到0:00后正常停止。

内容的提问来源于stack exchange，提问作者Chris Ellis