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

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

霞舞

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

原创

873人浏览过

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

本文将介绍如何使用 JavaScript 实现一个倒计时器，并在特定时间点（例如倒计时到 0:59）将字体颜色更改为红色。我们将提供完整的 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; // 倒计时总时长，单位秒
var i = 0;
var myInterval = setInterval(Timeout, 1000);

function Timeout() {
  var remainingTime = timings - i;
  var minutes = parseInt(remainingTime / 60);
  var seconds = remainingTime % 60;

  // 格式化时间显示
  var displaySeconds = seconds < 10 ? "0" + seconds : seconds;
  time[0].innerHTML = minutes + ":" + displaySeconds;

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

  i++;

  // 倒计时结束时停止计时器
  if (remainingTime < 0) {
    clearInterval(myInterval);
    time[0].innerHTML = "时间到！";
    time[0].style.color = "black"; // 恢复默认颜色
  }
}
</script>

</body>
</html>

登录后复制

代码解释:

HTML 结构: 包含一个 div 元素，其 class 为 timer，用于显示倒计时。
JavaScript 代码:
- time = document.getElementsByClassName("timer");：获取 class 为 timer 的 HTML 元素。
- timings = 600;：设置倒计时总时长为 600 秒 (10 分钟)。
- i = 0;：初始化计数器。
- myInterval = setInterval(Timeout, 1000);：每隔 1000 毫秒 (1 秒) 调用 Timeout 函数。
- Timeout 函数:
  - 计算剩余时间：remainingTime = timings - i;
  - 计算分钟和秒：minutes = parseInt(remainingTime / 60); 和 seconds = remainingTime % 60;
  - 格式化秒数，确保始终显示两位数：displaySeconds = seconds < 10 ? "0" + seconds : seconds;
  - 更新 timer 元素的内容：time[0].innerHTML = minutes + ":" + displaySeconds;
  - 关键部分： if (remainingTime === 59) { time[0].style.color = "red"; } 当剩余时间为 59 秒时，将 timer 元素的字体颜色设置为红色。
  - 增加计数器：i++;
  - 倒计时结束时，清除计时器并显示 "时间到！"，并将颜色恢复为黑色：if (remainingTime < 0) { clearInterval(myInterval); time[0].innerHTML = "时间到！"; time[0].style.color = "black"; }

注意事项:

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

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

timings 变量控制倒计时的总时长，可以根据需要进行调整。
if (remainingTime === 59) 语句中的条件可以修改，以在不同的时间点触发颜色变化。例如，要倒计时到1分钟时变色，可以改为 if (remainingTime === 60)。
确保 HTML 中包含具有相应 class 名称的元素，以便 JavaScript 代码可以正确地找到并更新它。
可以自定义 CSS 样式，例如更改字体大小、字体类型等。

总结:

通过在 Timeout 函数中添加一个简单的条件判断，可以轻松地在倒计时到达特定时间点时更改字体颜色。这提供了一种醒目的方式来提醒用户时间即将结束，增强用户体验。可以根据实际需求修改条件和颜色，以实现不同的效果。

以上就是JavaScript实现倒计时字体颜色变化的详细内容，更多请关注php中文网其它相关文章！