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

在 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)); // 加 1console.log(\"日：\" + now.getDate());console.log(\"时：\" + now.getHours());console.log(\"分：\" + now.getMinutes());console.log(\"秒：\" + now.getSeconds());console.log(\"星期：\" + now.getDay());

---

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

✅ HTML + CSS 部分

.time span { display: inline-block; width: 40px; height: 20px;}
 当前时间：

 年 月 日 时 分 秒

✅ 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 部分

✅ 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 处理；
• 实时时间功能适用于电子钟、计时器、状态栏等场景。

---

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