目录
前言
一、获取当前时间对象
二、常用方法解析
三、示例代码：获取并打印时间信息
四、完整示例：实时显示当前时间
HTML + CSS 部分
JavaScript 实现
五、另一种写法：直接拼接字符串显示时间
HTML 部分
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 部分
当前时间：
年
月
日
时
分
秒
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 部分
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
处理；
实时时间功能适用于电子钟、计时器、状态栏等场景。
到此这篇关于JavaScript获取当前日期与时间方法的文章就介绍到这了,更多相关JS获取当前日期与时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
Js 获取当前日期时间及其它操作实现代码
在JSP页面中获取当前日期时间的方法
JS 显示当前日期与时间的代码
JS获取当前日期时间并定时刷新示例
完整显示当前日期和时间的JS代码
Js获取当前日期时间及格式化代码
JS如何将当前日期或指定日期转时间戳
JavaScript 获取当前日期时间 年月日 时分秒的方法
javascript获取当前日期时间及其它操作函数