首页 > 网络编程 > JavaScript > javascript技巧 > JS获取当前日期与时间

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

2025-07-01 09:48:44 作者：小二爱编程·

这篇文章主要介绍了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)); // 加 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 处理；
实时时间功能适用于电子钟、计时器、状态栏等场景。

到此这篇关于JavaScript获取当前日期与时间方法的文章就介绍到这了,更多相关JS获取当前日期与时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！