- JavaScript 负责动态获取和更新时间：使用
setInterval函数，每隔一秒获取当前时间，并更新到网页的某个元素（比如一个<span>或<div>）中。 - CSS 负责定义颜色样式：创建多个CSS类,每个类代表一种颜色。
- JavaScript 负责动态切换CSS类：在每次更新时间的同时，根据时间的某个条件（比如秒数、分钟数等）来决定给时间元素应用哪个CSS类,从而改变其颜色。
下面我将提供几种常见且实用的方法,从简单到复杂。
基于秒数循环改变颜色（最简单）
这种方法最直观，时间会像跑马灯一样,每秒钟变换一次颜色。
JSP 文件 (timeColor.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">动态时间变色</title>
<style>
/* 定义几个颜色样式 */
.color-red { color: red; }
.color-blue { color: blue; }
.color-green { color: green; }
.color-purple { color: purple; }
.color-orange { color: orange; }
/* 时间显示样式 */
#clock {
font-size: 48px;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<h1>当前时间（每秒变色）</h1>
<p id="clock"></p>
<script>
// 获取显示时间的元素
const clockElement = document.getElementById('clock');
// 定义一个颜色数组
const colors = ['color-red', 'color-blue', 'color-green', 'color-purple', 'color-orange'];
// 定义一个函数来更新时间
function updateTime() {
// 1. 获取当前时间
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
// 2. 更新网页上的时间显示
clockElement.textContent = timeString;
// 3. 根据秒数来切换颜色
// 使用秒数 % 颜色数组的长度，得到一个0到4的循环索引
const colorIndex = now.getSeconds() % colors.length;
// 移除所有可能的颜色类
clockElement.classList.remove(...colors);
// 添加当前索引对应的颜色类
clockElement.classList.add(colors[colorIndex]);
}
// 立即执行一次，避免等待1秒
updateTime();
// 设置定时器，每1000毫秒（1秒）执行一次updateTime函数
setInterval(updateTime, 1000);
</script>
</body>
</html>
代码解释：
- CSS部分：定义了5个
.color-*类，分别对应红、蓝、绿、紫、橙。 - JavaScript部分：
clockElement: 获取JSP页面中id="clock"的<p>colors: 一个包含所有颜色类名的数组。updateTime(): 核心函数。- 获取当前时间，并格式化为
HH:MM:SS。 clockElement.textContent = timeString;将格式化后的时间写入<p>now.getSeconds() % colors.length: 这是关键。getSeconds()返回0-59的秒数。% colors.length（即% 5）的结果会在0, 1, 2, 3, 4之间循环，第0秒和第5秒都是0，第1秒和第6秒都是1,以此类推。clockElement.classList.remove(...colors): 移除元素上所有我们定义的颜色类,避免样式叠加。clockElement.classList.add(colors[colorIndex]): 根据计算出的索引,给元素添加对应的颜色类。
setInterval(updateTime, 1000): 设置一个定时器，每秒调用一次updateTime函数,实现动态更新。
根据时间段改变颜色（更实用）
这种方法更符合实际需求，比如早上是黄色，下午是蓝色,晚上是紫色。
JSP 文件 (timeOfDayColor.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">动态时间变色（按时间段）</title>
<style>
.time-color-morning { color: #FFD700; /* 金色 */ }
.time-color-afternoon { color: #1E90FF; /* 道奇蓝 */ }
.time-color-evening { color: #FF6347; /* 番茄红 */ }
.time-color-night { color: #9370DB; /* 中紫色 */ }
#clock {
font-size: 48px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>当前时间（按时段变色）</h1>
<p id="clock"></p>
<script>
const clockElement = document.getElementById('clock');
function updateTime() {
const now = new Date();
const hours = now.getHours();
let timeClass = '';
// 根据小时数判断时间段
if (hours >= 5 && hours < 12) {
timeClass = 'time-color-morning'; // 早上 5:00 - 11:59
} else if (hours >= 12 && hours < 18) {
timeClass = 'time-color-afternoon'; // 下午 12:00 - 17:59
} else if (hours >= 18 && hours < 22) {
timeClass = 'time-color-evening'; // 傍晚 18:00 - 21:59
} else {
timeClass = 'time-color-night'; // 夜晚 22:00 - 4:59
}
// 更新时间显示
const timeString = now.toLocaleTimeString(); // 使用更简洁的时间格式化
clockElement.textContent = timeString;
// 移除旧类，添加新类
clockElement.className = ''; // 清除所有类
clockElement.classList.add(timeClass);
}
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
代码解释：
- CSS部分：定义了四个类，分别对应早晨、下午、傍晚、夜晚。
- JavaScript部分：
updateTime()函数中，通过now.getHours()获取当前小时。- 使用
if-else if-else逻辑判断当前时间属于哪个时段。 - 为
timeClass变量赋值对应的CSS类名。 clockElement.className = '';：清空元素的所有类名,这是最直接的重置方式。clockElement.classList.add(timeClass);：添加当前时段对应的类名。
平滑过渡颜色（更炫酷）
如果希望颜色不是瞬间切换，而是有一个渐变的过程，可以使用CSS的 transition 属性。
JSP 文件 (smoothTransition.jsp)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">动态时间变色（平滑过渡）</title>
<style>
/* 为颜色变化添加过渡效果，持续0.5秒 */
#clock {
font-size: 48px;
font-weight: bold;
/* 关键：添加过渡效果 */
transition: color 0.5s ease-in-out;
}
/* 定义颜色样式，和方法一类似 */
.color-red { color: red; }
.color-blue { color: blue; }
.color-green { color: green; }
.color-purple { color: purple; }
.color-orange { color: orange; }
</style>
</head>
<body>
<h1>当前时间（平滑变色）</h1>
<p id="clock"></p>
<script>
// 这部分JavaScript代码和方法一完全一样
const clockElement = document.getElementById('clock');
const colors = ['color-red', 'color-blue', 'color-green', 'color-purple', 'color-orange'];
function updateTime() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
clockElement.textContent = timeString;
const colorIndex = now.getSeconds() % colors.length;
clockElement.classList.remove(...colors);
clockElement.classList.add(colors[colorIndex]);
}
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
代码解释：
- 唯一的区别在CSS中：
#clock选择器上增加了transition: color 0.5s ease-in-out;。color: 指定只对color属性的变化应用过渡效果。5s: 过渡效果持续0.5秒。ease-in-out: 过渡的速度曲线，开始和结束慢，中间快,效果更自然。
- JavaScript部分无需任何改动，当JavaScript通过
classList.add()改变颜色类时，浏览器会自动检测到color属性的变化，并应用我们定义的transition效果,从而实现平滑的颜色渐变。
| 方法 | 实现方式 | 优点 | 缺点 |
|---|---|---|---|
| 方法一 | 基于秒数循环切换CSS类 | 简单、直观、代码少 | 变化规律，可能不够实用 |
| 方法二 | 基于时间段（小时）切换CSS类 | 实用性强，符合日常逻辑 | 代码稍多，需要手动定义时段 |
| 方法三 | 在方法一基础上，添加CSS transition |
视觉效果平滑、炫酷 | 对性能要求稍高，但影响可忽略 |
你可以根据自己的具体需求选择最适合的方法，对于大多数场景，方法二 是最实用和推荐的选择。
