JavaScript实现实时显示当前日期、星期与时间的完整代码

Ruby

发布时间：2026-10-14| 4人浏览过

原创

在网页开发中，实时展示当前的日期和时间是一项常见功能。通过JavaScript内置的Date对象，我们可以轻松获取客户端的系统时间，并利用DOM操作将其渲染到页面上。

核心实现思路

要构建一个实时显示时间的组件，我们需要解决三个问题：如何获取准确的时间数据？如何将数字月份转换为“XX月”格式以及如何将数字星期转换为中文星期名称最后如何保证时间每秒自动刷新。

第1步：准备HTML容器

首先需要在页面中创建一个用于承载时间信息的占位符，通常是一个<div>或<p>标签，并赋予唯一的ID以便后续定位。

<!-- HTML结构示例 -->
<div id="nowTime"></div>

第2步：编写JavaScript获取时间函数

创建一个主函数用于提取各个时间维度并格式化输出。注意现代浏览器推荐使用getFullYear()而非已过时的getYear()。

<script>
function updateCurrentTime() {
    // 1. 获取当前日期对象
    var now = new Date();

    // 2. 提取基本时间单元
    var year = now.getFullYear();
    var month = now.getMonth() + 1; // getMonth返回0-11，需加1
    var date = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();

    // 3. 处理星期映射 (0=周日, 1=周一...)
    var days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var dayName = days[now.getDay()];

    // 4. 拼接最终字符串
    // 建议对时、分、秒进行补零处理(如9点变为09)，增强可读性
    var h = hour < 10 ? '0' + hour : hour;
    var m = minute < 10 ? '0' + minute : minute;
    var s = second < 10 ? '0' + second : second;

    var timeString = "当前时间：" + year + "年" + month + "月" + date + "日 " + dayName + " " + h + ":" + m + ":" + s;

    // 5. 更新DOM内容
    document.getElementById("nowTime").innerText = timeString;
}

// 初始化执行一次，确保加载即刻显示
updateCurrentTime();
</script>

第3步：启用定时器实现实时更新

为了让时间每秒跳动，需要使用setInterval方法。该方法会每隔指定毫秒数调用一次提供的函数。

// 每隔1000毫秒（1秒）调用更新函数
var timerId = setInterval(updateCurrentTime, 1000);

优化建议与维护说明

性能考量：对于仅需静态显示一次时间（如服务器端生成后静态渲染）的场景，无需使用定时器以节省资源。但在前端实时时钟场景下，setInterval是标准做法。
时区问题：上述代码使用的是用户本地计算机时间。如果需要特定城市时间，可引入第三方库或利用Date对象的时区转换API。
兼容性：本方案兼容所有现代Web浏览器，去除了旧版IE特有的