JavaScript 获取当前日期与时间的方法详解

在 JavaScript 中，可以通过 Date 对象来获取系统当前的时间信息，并使用 getFullYear()、getMonth()、getDate()、getHours() 等方法提取具体的年、月、日、时、分、秒等信息，最后通过 DOM 操作（如 innerHTML）将时间显示在网页上。

一、获取当前时间对象

复制代码

var now = new Date(); // 创建一个表示当前时间的对象

二、常用方法解析

方法	描述
`getFullYear()`	获取当前年份（四位数字，例如：2025）✅ 推荐使用
`getMonth()`	获取月份（从 0 开始，即 0 表示 1 月，11 表示 12 月）
`getDate()`	获取日期（1 ~ 31）
`getDay()`	获取星期几（0 表示星期日，1~6 表示星期一到星期六）
`getHours()`	获取小时数（0 ~ 23）
`getMinutes()`	获取分钟数（0 ~ 59）
`getSeconds()`	获取秒数（0 ~ 59）

⚠️ 注意：

getYear() 已被弃用，推荐使用 getFullYear()。

getMonth() 返回值比实际月份小 1，需要加 1 才能显示正确月份。

三、示例代码：获取并打印时间信息

复制代码

var now = new Date();

console.log("年：" + now.getFullYear());
console.log("月：" + (now.getMonth() + 1)); // 加 1
console.log("日：" + now.getDate());
console.log("时：" + now.getHours());
console.log("分：" + now.getMinutes());
console.log("秒：" + now.getSeconds());
console.log("星期：" + now.getDay());

四、完整示例：实时显示当前时间

✅ HTML + CSS 部分

复制代码

<style>
.time span {
    display: inline-block;
    width: 40px;
    height: 20px;
}
</style>

<div class="time">
    当前时间：<br><br>
    <span id="year"></span>年
    <span id="month"></span>月
    <span id="day"></span>日
    <span id="hour"></span>时
    <span id="minute"></span>分
    <span id="second"></span>秒
</div>

✅ JavaScript 实现

复制代码

function showTime() {
    var now = new Date();

    var year = now.getFullYear();
    var month = now.getMonth() + 1; // 注意加 1
    var day = now.getDate();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();

    // 更新页面内容
    document.getElementById("year").innerHTML = year;
    document.getElementById("month").innerHTML = month;
    document.getElementById("day").innerHTML = day;
    document.getElementById("hour").innerHTML = hour;
    document.getElementById("minute").innerHTML = minute;
    document.getElementById("second").innerHTML = second;
}

// 初始调用一次
showTime();

// 每隔 1 秒更新一次时间
setInterval(showTime, 1000);

五、另一种写法：直接拼接字符串显示时间

✅ HTML 部分

复制代码

<div id="clock"></div>

✅ JavaScript 部分

复制代码

function updateTime() {
    var date = new Date();

    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();

    var week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    var currentWeek = week[date.getDay()];

    // 格式化为统一格式
    var timeStr = `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds} ${currentWeek}`;

    document.getElementById("clock").innerText = timeStr;
}

updateTime();
setInterval(updateTime, 1000);

六、总结

功能	方法
获取年份	`getFullYear()` ✅ 推荐使用
获取月份	`getMonth() + 1`（注意加 1）
获取日期	`getDate()`
获取星期	`getDay()` → 可映射成中文
获取小时	`getHours()`
获取分钟	`getMinutes()`
获取秒数	`getSeconds()`
显示时间	使用 `innerHTML` 或 `innerText` 更新页面元素
实时更新	使用 `setInterval(fn, 1000)` 每秒刷新一次

七、注意事项

getMonth() 返回的是从 0 开始的月份，记得手动加 1；
getYear() 不推荐使用，已过时；
如果需要国际化，可结合 Intl.DateTimeFormat 处理；
实时时间功能适用于电子钟、计时器、状态栏等场景。

个人笔记，请大佬们多提意见！！!