JavaScript 实现倒计时字体颜色动态变化-js教程-PHP中文网

JavaScript 实现倒计时字体颜色动态变化

碧海醫心

发布： 2025-08-30 16:33:01

原创

670人浏览过

javascript 实现倒计时字体颜色动态变化

本文介绍了如何使用 JavaScript 创建一个倒计时定时器，并在特定时间点（例如倒计时到 0:59 时）动态改变字体颜色。通过修改 Timeout 函数，添加条件判断语句，可以轻松实现这一功能，从而提升用户体验。

实现倒计时字体颜色动态变化

以下是如何使用 JavaScript 实现倒计时并在特定时间点改变字体颜色的详细步骤。

1. HTML 结构

首先，需要在 HTML 中创建一个用于显示倒计时的元素。通常使用 <div> 标签，并赋予一个 class 名称，例如 timer。

立即学习“Java免费学习笔记（深入）”；

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

登录后复制

2. JavaScript 代码

接下来，编写 JavaScript 代码来实现倒计时功能，并在特定时间点改变字体颜色。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

var time = document.getElementsByClassName("timer");
var timings = 600; // 倒计时总时长，单位为秒 (10分钟)
var i = 0;
var myInterval = setInterval(Timeout, 1000);

function Timeout() {
  // 计算剩余时间
  var remainingTime = timings - i;

  // 格式化时间，确保显示两位数
  var minutes = parseInt(remainingTime / 60);
  var seconds = remainingTime % 60;
  var formattedSeconds = seconds < 10 ? "0" + seconds : seconds;

  // 更新 HTML 内容
  time[0].innerHTML = minutes + ":" + formattedSeconds;

  // 当倒计时到 0:59 时，改变字体颜色
  if (remainingTime === 59) {
    time[0].style.color = "red";
  }

  // 递增计数器
  i++;

  // 倒计时结束时，停止计时器
  if (remainingTime < 0) {
    clearInterval(myInterval);
    time[0].innerHTML = "0:00"; // 可选：倒计时结束时显示 0:00
  }
}

登录后复制

代码解释：

document.getElementsByClassName("timer"): 获取 class 为 timer 的 HTML 元素。
timings: 设置倒计时的总时长，单位为秒。在此示例中，timings = 600 表示 10 分钟。
setInterval(Timeout, 1000): 每隔 1000 毫秒（1 秒）调用一次 Timeout 函数。
Timeout() 函数：
- 计算剩余时间 remainingTime。
- 格式化时间，确保秒数显示为两位数（例如，0:09 而不是 0:9）。
- 更新 HTML 元素的内容，显示倒计时。
- 关键部分：if (remainingTime === 59) 判断剩余时间是否为 59 秒，如果是，则将字体颜色设置为红色。
- 递增计数器 i。
- 当倒计时结束时 (remainingTime < 0)，停止计时器。

3. 完整示例

将 HTML 和 JavaScript 代码组合在一起，创建一个完整的示例：

<!DOCTYPE html>
<html>
<head>
  <title>倒计时字体颜色变化</title>
  <style>
    .timer {
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="timer"></div>

  <script>
    var time = document.getElementsByClassName("timer");
    var timings = 600; // 倒计时总时长，单位为秒 (10分钟)
    var i = 0;
    var myInterval = setInterval(Timeout, 1000);

    function Timeout() {
      // 计算剩余时间
      var remainingTime = timings - i;

      // 格式化时间，确保显示两位数
      var minutes = parseInt(remainingTime / 60);
      var seconds = remainingTime % 60;
      var formattedSeconds = seconds < 10 ? "0" + seconds : seconds;

      // 更新 HTML 内容
      time[0].innerHTML = minutes + ":" + formattedSeconds;

      // 当倒计时到 0:59 时，改变字体颜色
      if (remainingTime === 59) {
        time[0].style.color = "red";
      }

      // 递增计数器
      i++;

      // 倒计时结束时，停止计时器
      if (remainingTime < 0) {
        clearInterval(myInterval);
        time[0].innerHTML = "0:00"; // 可选：倒计时结束时显示 0:00
      }
    }
  </script>
</body>
</html>

登录后复制

4. 注意事项