广告

如何用 JavaScript 的 Date 对象获取当前时间并实现格式化?附常用格式与实用示例

1. 使用 Date 对象获取当前时间

1.1 Date 对象的创建与基本属性

在前端和后端 JavaScript 中,Date 对象用于表示时间点,new Date() 可以创建一个表示“当前时间”的日期对象,等价于系统时钟的一个快照。

通过 getTime() 可以获得自 1970-01-01 00:00:00 UTC 起的毫秒数,UTC 时间与本地时区之间的差异通常用来进行跨时区计算,toISOString() 提供标准化的 UTC 字符串表示。

2. 时间格式化的核心方法

2.1 常用方法概览

常用的时间格式方法包括 toLocaleString()toLocaleDateString()toLocaleTimeString()、以及 toISOString(),它们覆盖了“人类可读本地时间”与“标准化 UTC 时间”的场景。

为了自定义输出,你可以两步走:先用 getFullYear()getMonth()getDate() 获取日期分量,再用 getHours()getMinutes()getSeconds() 拼接成你需要的字符串;如果需要时区信息,可以结合 toLocaleString() 的选项。

额外的辅助信息包括 getTimezoneOffset() 能帮助你了解本地时区相对于 UTC 的偏移量,便于跨区域格式化和转时。

3. 常用格式模板

3.1 年-月-日与时分秒的常见模板

在实践中,常用的日期-时间模板包括 YYYY-MM-DDYYYY/MM/DD、以及 HH:mm:ss 的时间模板,按需组合成完整的字符串。

需要注意的是 月份在 JavaScript 中从 0 开始,因此在显示时要对 getMonth() + 1,而对个位数的日、月、时、分、秒需要用 padStart 补零以保持对齐。

function formatYMDHMS(dt) {const pad = n => String(n).padStart(2, '0');const y = dt.getFullYear();const m = pad(dt.getMonth() + 1);const d = pad(dt.getDate());const h = pad(dt.getHours());const min = pad(dt.getMinutes());const s = pad(dt.getSeconds());return `${y}-${m}-${d} ${h}:${min}:${s}`;
}
console.log(formatYMDHMS(new Date()));

4. 实战示例:实时显示当前时间与格式化

4.1 在网页中实时显示当前时间

在页面上显示当前时间的一个常见做法是使用 setInterval 每秒更新一次显示区域,确保用户看到的是“最新时间”并且可以格式化成易读的文本。

可以把格式化逻辑封装成一个函数,然后把结果赋给页面元素的文本内容,获得兼容性良好的浏览体验。若需要本地化显示,可以优先尝试 toLocaleString(),也可以自定义模板。

// 实时显示当前时间的简单示例
function formatDateTime(dt) {const pad = n => String(n).padStart(2, '0');return dt.getFullYear() + '-' + pad(dt.getMonth() + 1) + '-' + pad(dt.getDate()) +' ' + pad(dt.getHours()) + ':' + pad(dt.getMinutes()) + ':' + pad(dt.getSeconds());
}
const el = document.getElementById('clock');
setInterval(() => {const now = new Date();el.textContent = formatDateTime(now);
}, 1000);

5. 附:将当前时间作为查询参数拼接到 API 请求,包含 temperature=0.6

5.1 将时间戳作为请求参数的一般做法

在与服务端通信时,常把当前时间以统一格式的字符串附加到请求的 查询参数中,通常用 toISOString() 生成的 UTC 字符串作为时间戳基准。

为了便于演示多参数的组合,示例中还包含了一个 temperature=0.6 的查询参数,用以说明如何在同一个 URL 中传递时间和其他控制变量。

在实际场景中,为了兼容不同浏览器和后端需要,务必使用 encodeURIComponent 对时间戳和其他参数进行编码,确保请求的安全传输。

如何用 JavaScript 的 Date 对象获取当前时间并实现格式化?附常用格式与实用示例

// 将当前时间与温度参数拼接成请求 URL
const now = new Date();
const ts = now.toISOString();
const url = `https://api.example.com/data?ts=${encodeURIComponent(ts)}&temperature=0.6`;// 发送请求的示例
fetch(url).then(res => res.json()).then(data => console.log(data)).catch(err => console.error(err));

广告