在网页开发中，显示当前时间并实现实时刷新是很常见的需求，无论是个人博客的页脚时间展示，还是后台管理系统的顶部时间栏，都需要用到相关实现技巧。下面我们就一步步讲解具体的实现方法。
核心实现原理
要实现HTML页面显示当前时间并实时刷新，主要依赖两个核心部分：一是JavaScript的Date对象，用来获取当前的年、月、日、时、分、秒等时间信息；二是定时器函数，用来每隔固定时间重新获取时间并更新页面展示，从而实现实时刷新的效果。
1. 获取当前时间
首先我们需要通过Date对象获取当前的时间信息，Date对象提供了多个方法可以获取对应的时间片段，常用的方法如下：
getFullYear()：获取四位年份getMonth()：获取月份，注意返回值范围是0-11，需要加1才是实际月份getDate()：获取日期（几号）getHours()：获取小时数（0-23）getMinutes()：获取分钟数（0-59）getSeconds()：获取秒数（0-59）
获取到这些时间片段后，我们可以按照需要的格式拼接成完整的时间字符串。另外为了让时间格式更统一，比如分钟和秒如果是个位数时前面补0，我们可以写一个补零函数来处理。
2. 定时更新时间
获取到一次时间只能展示初始的当前时间，要实现实时刷新，就需要用到setInterval定时器，设置每隔1000毫秒（也就是1秒）重新执行一次获取时间并更新页面的操作，这样页面上的时间就会每秒自动更新，实现实时刷新的效果。
完整代码示例
下面是可直接复用的完整代码，包含了HTML结构和对应的JavaScript逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时时间展示</title>
<style>
.time-container {
text-align: center;
margin-top: 50px;
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<div class="time-container" id="currentTime"></div>
<script>
// 补零函数，确保时间片段是两位数
function padZero(num) {
return num < 10 ? '0' + num : num;
}
// 获取并格式化当前时间的函数
function getCurrentTime() {
const now = new Date();
const year = now.getFullYear();
const month = padZero(now.getMonth() + 1); // 月份要加1
const date = padZero(now.getDate());
const hours = padZero(now.getHours());
const minutes = padZero(now.getMinutes());
const seconds = padZero(now.getSeconds());
// 拼接成 YYYY-MM-DD HH:MM:SS 格式
return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
}
// 更新页面时间显示的函数
function updateTime() {
const timeElement = document.getElementById('currentTime');
timeElement.textContent = getCurrentTime();
}
// 初始加载时先执行一次，避免页面加载完成前有空白
updateTime();
// 设置定时器，每1000毫秒（1秒）执行一次更新
setInterval(updateTime, 1000);
</script>
</body>
</html>注意事项
在实际使用过程中，有几个需要注意的点：
- 如果用户调整了本地设备的时间，页面展示的时间会跟随设备时间变化，因为这是基于客户端本地时间获取的逻辑。如果需要统一的服务器时间，还需要额外调用后端接口获取时间。
- 定时器一直运行会持续占用一定的客户端资源，如果页面不需要一直展示时间，可以在不需要的时候用
clearInterval清除定时器。 - 月份获取时返回值是0到11，一定要记得加1才是实际的月份，这是新手很容易踩的坑。
如果需要展示12小时制的时间，可以在获取小时数后判断，大于12则减去12，同时添加上午/下午的标识即可，逻辑和上述代码类似，只需要调整格式化部分的逻辑。
HTMLJavaScriptDate对象定时器时间刷新修改时间：2026-05-29 22:39:04