JavaScript实时计时器：实现特定时间点字体颜色动态变化

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

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++; // 增加已过去的时间
}

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"; // 将字体颜色设置为红色
}