网页中的时间显示分为静态和动态两种类型，静态时间适合展示固定不变的时间节点，动态时间则能实时更新当前时间，满足用户查看实时信息的需求。两种方式都可以通过HTML结合相关技术实现，下面分别介绍具体的实现方法。
静态时间显示编辑方法
静态时间不需要实时更新，直接把时间内容放在HTML的标签内即可，常用<span>、<div>等容器标签来承载时间内容，也可以通过<time>标签来语义化展示时间。
示例代码如下：
<!-- 普通容器展示静态时间 --> <div>当前固定时间：2024年5月20日 10:30:00</div> <span>活动开始时间：2024年6月1日 09:00</span> <!-- 语义化time标签展示静态时间 --> <time datetime="2024-05-20T10:30:00">2024年5月20日 10点30分</time>
动态时间显示编辑方法
动态时间需要借助JavaScript的Date对象获取当前时间，再通过定时器定期更新页面上的时间内容，实现实时展示的效果。
基础动态时间实现
首先需要在HTML中准备一个容器用来展示动态时间，然后通过JavaScript获取当前时间并写入容器，同时使用setInterval方法设置每秒更新一次时间。
完整代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态时间显示</title>
</head>
<body>
<div id="dynamicTime"></div>
<script>
// 定义更新时间的函数
function updateTime() {
// 创建Date对象获取当前时间
const now = new Date();
// 获取年、月、日、时、分、秒
const year = now.getFullYear();
// 月份从0开始计数，需要加1
const month = now.getMonth() + 1;
const day = now.getDate();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 拼接时间字符串，不足两位的补0
const timeStr = `${year}年${month.toString().padStart(2, '0')}月${day.toString().padStart(2, '0')}日 ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
// 将时间字符串写入容器
document.getElementById('dynamicTime').innerText = `当前动态时间：${timeStr}`;
}
// 页面加载完成后先执行一次更新时间
updateTime();
// 设置定时器，每1000毫秒（1秒）执行一次更新时间函数
setInterval(updateTime, 1000);
</script>
</body>
</html>
自定义时间格式
如果需要不同的时间格式，可以修改时间拼接的逻辑，比如只展示时分秒，或者展示成YYYY-MM-DD的格式，下面是展示YYYY-MM-DD HH:mm:ss格式的示例：
function updateCustomTime() {
const now = new Date();
const year = now.getFullYear();
const month = (now.getMonth() + 1).toString().padStart(2, '0');
const day = now.getDate().toString().padStart(2, '0');
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
// 拼接成YYYY-MM-DD HH:mm:ss格式
const timeStr = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
document.getElementById('customTime').innerText = timeStr;
}
注意事项
- 使用
Date对象获取的是用户本地时间，不同用户所在时区不同，显示的时间会有差异。 - 定时器的间隔可以根据需求调整，不需要每秒更新的场景可以设置成每分钟或者每小时更新。
- 如果页面中有多个时间展示区域，可以封装统一的时间格式化函数，避免重复代码。
HTMLJavaScript动态时间Date对象修改时间：2026-07-23 02:30:28