JS 时间格式大全（含大量示例）

在 JS 中，处理时间和日期是常见的需求。无论是展示当前时间、格式化日期字符串，还是进行时间计算，JavaScript 都提供了丰富的 API 来满足这些需求。本文将详细介绍如何使用 JavaScript 生成各种时间格式，从基础到高级，涵盖常见的场景。内容比较多，请大家搭配目录食用。

基础时间获取

1.1 获取当前时间

JavaScript 提供了 Date 对象来处理日期和时间。要获取当前时间，只需创建一个 Date 对象即可：

const now = new Date();
console.log(now); // 输出当前时间的完整日期和时间
1.2 获取时间戳

时间戳表示从 1970 年 1 月 1 日 00:00:00 UTC 到当前时间的毫秒数。可以使用 getTime() 方法或 Date.now() 来获取时间戳：

const timestamp1 = new Date().getTime();
const timestamp2 = Date.now();
console.log(timestamp1, timestamp2); // 输出当前时间的时间戳

时间格式化

2.1 使用 toLocaleString() 格式化时间

toLocaleString() 方法可以根据本地化设置格式化日期和时间：

const now = new Date();
console.log(now.toLocaleString()); // 输出本地化的日期和时间
console.log(now.toLocaleDateString()); // 输出本地化的日期
console.log(now.toLocaleTimeString()); // 输出本地化的时间
2.2 自定义格式化

如果需要更灵活的格式化，可以手动拼接日期和时间的各个部分：

const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');const formattedDate = `${year}-${month}-${day}`;
const formattedTime = `${hours}:${minutes}:${seconds}`;
const formattedDateTime = `${formattedDate} ${formattedTime}`;console.log(formattedDate); // 输出格式化的日期，如 "2023-10-05"
console.log(formattedTime); // 输出格式化的时间，如 "14:30:45"
console.log(formattedDateTime); // 输出格式化的日期和时间，如 "2023-10-05 14:30:45"
2.3 使用 Intl.DateTimeFormat 进行高级格式化

Intl.DateTimeFormat 对象提供了更强大的本地化日期和时间格式化功能：

const now = new Date();
const formatter = new Intl.DateTimeFormat('zh-CN', {year: 'numeric',month: '2-digit',day: '2-digit',hour: '2-digit',minute: '2-digit',second: '2-digit',hour12: false // 使用24小时制
});console.log(formatter.format(now)); // 输出格式化的日期和时间，如 "2023/10/05 14:30:45"

时间计算

3.1 时间加减

可以通过修改 Date 对象的各个部分来进行时间加减：

const now = new Date();
now.setHours(now.getHours() + 1); // 当前时间加1小时
now.setDate(now.getDate() + 7); // 当前日期加7天
console.log(now);
3.2 计算时间差

可以通过时间戳来计算两个时间点之间的差值：

const start = new Date('2023-10-01T00:00:00');
const end = new Date('2023-10-05T12:00:00');
const diffInMilliseconds = end - start; // 时间差，单位为毫秒
const diffInSeconds = diffInMilliseconds / 1000;
const diffInMinutes = diffInSeconds / 60;
const diffInHours = diffInMinutes / 60;
const diffInDays = diffInHours / 24;console.log(diffInDays); // 输出时间差，如 "4.5" 天

时区处理

4.1 获取当前时区

可以使用 Intl.DateTimeFormat 获取当前时区：

const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
console.log(timeZone); // 输出当前时区，如 "Asia/Shanghai"
4.2 转换时区

可以使用 toLocaleString() 或 Intl.DateTimeFormat 来转换时区：

const now = new Date();
const options = {timeZone: 'America/New_York',year: 'numeric',month: '2-digit',day: '2-digit',hour: '2-digit',minute: '2-digit',second: '2-digit',hour12: false
};const formatter = new Intl.DateTimeFormat('en-US', options);
console.log(formatter.format(now)); // 输出纽约时间，如 "10/05/2023 02:30:45"

第三方库推荐

虽然 JavaScript 原生的 Date 对象已经足够强大，但在处理复杂的日期和时间操作时，使用第三方库可以更加方便。以下是几个常用的日期处理库：

  • Moment.js: 功能强大，但体积较大，推荐使用其替代品。
  • Day.js: Moment.js 的轻量级替代品，API 兼容，体积小。
  • date-fns: 模块化设计，按需引入，功能丰富。
// 使用 Day.js 格式化时间
const dayjs = require('dayjs');
console.log(dayjs().format('YYYY-MM-DD HH:mm:ss')); // 输出格式化的日期和时间

常用的格式示例

1. 基础时间格式

const now = new Date();// 完整日期和时间
console.log(now.toString()); // "Thu Oct 05 2023 14:30:45 GMT+0800 (China Standard Time)"// ISO 格式
console.log(now.toISOString()); // "2023-10-05T06:30:45.000Z"// 本地日期和时间
console.log(now.toLocaleString()); // "2023/10/5 14:30:45" (根据本地化设置)// 本地日期
console.log(now.toLocaleDateString()); // "2023/10/5"// 本地时间
console.log(now.toLocaleTimeString()); // "14:30:45"

2. 自定义格式化

const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');// 年-月-日
console.log(`${year}-${month}-${day}`); // "2023-10-05"// 时:分:秒
console.log(`${hours}:${minutes}:${seconds}`); // "14:30:45"// 年/月/日 时:分:秒
console.log(`${year}/${month}/${day} ${hours}:${minutes}:${seconds}`); // "2023/10/05 14:30:45"// 月/日/年
console.log(`${month}/${day}/${year}`); // "10/05/2023"// 日-月-年
console.log(`${day}-${month}-${year}`); // "05-10-2023"

3. 相对时间

const now = new Date();
const past = new Date(now - 5 * 60 * 1000); // 5分钟前
const future = new Date(now + 2 * 24 * 60 * 60 * 1000); // 2天后// 相对时间计算
function formatRelativeTime(date) {const diff = Math.round((date - now) / 1000); // 时间差（秒）if (diff < 60) return `${diff}秒${diff > 0 ? '后' : '前'}`;if (diff < 3600) return `${Math.floor(diff / 60)}分钟${diff > 0 ? '后' : '前'}`;if (diff < 86400) return `${Math.floor(diff / 3600)}小时${diff > 0 ? '后' : '前'}`;return `${Math.floor(diff / 86400)}天${diff > 0 ? '后' : '前'}`;
}console.log(formatRelativeTime(past)); // "5分钟前"
console.log(formatRelativeTime(future)); // "2天后"

4. 时间拼接

const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');// 拼接成文件名格式
console.log(`log_${year}${month}${day}_${hours}${minutes}${seconds}.txt`); // "log_20231005_143045.txt"// 拼接成日志格式
console.log(`[${year}-${month}-${day} ${hours}:${minutes}:${seconds}] INFO: Hello World`); // "[2023-10-05 14:30:45] INFO: Hello World"

5. 时区转换

const now = new Date();// 转换为纽约时间
console.log(now.toLocaleString('en-US', { timeZone: 'America/New_York' })); // "10/5/2023, 2:30:45 AM"// 转换为东京时间
console.log(now.toLocaleString('ja-JP', { timeZone: 'Asia/Tokyo' })); // "2023/10/5 15:30:45"

6. 时间戳格式化

const timestamp = Date.now();// 时间戳转日期
const date = new Date(timestamp);
console.log(date.toLocaleString()); // "2023/10/5 14:30:45"// 时间戳转自定义格式
const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
console.log(formattedDate); // "2023-10-05"

7. 高级格式化（Intl.DateTimeFormat）

const now = new Date();// 中文格式
console.log(new Intl.DateTimeFormat('zh-CN', { dateStyle: 'full', timeStyle: 'long' }).format(now)); // "2023年10月5日星期四 14:30:45 GMT+8"// 英文格式
console.log(new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'short' }).format(now)); // "Oct 5, 2023, 2:30 PM"// 自定义格式
console.log(new Intl.DateTimeFormat('en-US', {year: 'numeric',month: 'short',day: '2-digit',hour: '2-digit',minute: '2-digit',second: '2-digit',hour12: true
}).format(now)); // "Oct 05, 2023, 02:30:45 PM"

8. 时间差计算

const start = new Date('2023-10-01T00:00:00');
const end = new Date('2023-10-05T12:00:00');// 计算时间差（毫秒）
const diff = end - start;// 转换为天、小时、分钟、秒
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);console.log(`${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`); // "4天 12小时 0分钟 0秒"

9. 使用第三方库（Day.js）

const dayjs = require('dayjs');// 格式化
console.log(dayjs().format('YYYY-MM-DD HH:mm:ss')); // "2023-10-05 14:30:45"// 相对时间
console.log(dayjs().from(dayjs('2023-10-01'))); // "4天前"// 时间差
console.log(dayjs('2023-10-05').diff(dayjs('2023-10-01'), 'day')); // 4

10. 其他格式

const now = new Date();// 12小时制
console.log(now.toLocaleString('en-US', { hour12: true })); // "10/5/2023, 2:30:45 PM"// 24小时制
console.log(now.toLocaleString('en-US', { hour12: false })); // "10/5/2023, 14:30:45"// 仅日期（短格式）
console.log(now.toLocaleDateString('en-US', { dateStyle: 'short' })); // "10/5/23"// 仅时间（短格式）
console.log(now.toLocaleTimeString('en-US', { timeStyle: 'short' })); // "2:30 PM"

总结

JavaScript 提供了丰富的 API 来处理日期和时间，从基础的 Date 对象到高级的 Intl.DateTimeFormat，可以满足大多数场景的需求。通过本文的介绍，你应该能够掌握如何使用 JavaScript 生成各种时间格式，并进行时间计算和时区转换。对于更复杂的需求，可以考虑使用第三方库来简化操作。

希望本文对你有所帮助，祝你在处理时间格式时游刃有余！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/68264.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

软件测试 —— 性能测试（jmeter）

软件测试 —— 性能测试（jmeter）

软件测试 —— 性能测试&#xff08;jmeter&#xff09; 什么是jmeter安装jmeterjmeter常用组件线程组取样器结果树 我们之前学习了接口测试工具Postman&#xff0c;我们今天要学习的是性能测试工具——jmeter 什么是jmeter Apache JMeter 是一个开源的性能测试工具&#xff…
阅读更多...
电阻补偿OTA的噪声分析

电阻补偿OTA的噪声分析

上文&#xff08;补偿电阻对ota零极点的影响-CSDN博客&#xff09;分析了补偿电阻对五管OTA零极点的影响&#xff0c;该篇借分析电阻补偿OTA的噪声来串联复习下噪声章节的一些基础概念。 1.噪声分析 辅助定理 开始分析OTA噪声之前&#xff0c;先引入一个辅助定理&#xff08;R…
阅读更多...
从CRUD到高级功能：EF Core在.NET Core中全面应用（四）

从CRUD到高级功能：EF Core在.NET Core中全面应用（四）

初识表达式树 表达式树&#xff1a;是一种可以描述代码结构的数据结构&#xff0c;它由一个节点组成&#xff0c;节点表示代码中的操作、方法调用或条件表达式等&#xff0c;它将代码中的表达式转换成一个树形结构&#xff0c;每个节点代表了代码中的操作例如&#xff0c;如果…
阅读更多...
C语言初阶力扣刷题——349. 两个数组的交集【难度：简单】

C语言初阶力扣刷题——349. 两个数组的交集【难度：简单】

1. 题目描述 力扣在线OJ题目 给定两个数组&#xff0c;编写一个函数来计算它们的交集。 示例&#xff1a; 输入&#xff1a;nums1 [1,2,2,1], nums2 [2,2] 输出&#xff1a;[2] 输入&#xff1a;nums1 [4,9,5], nums2 [9,4,9,8,4] 输出&#xff1a;[9,4] 2. 思路 直接暴力…
阅读更多...
在Qt中实现点击一个界面上的按钮弹窗到另一个界面

在Qt中实现点击一个界面上的按钮弹窗到另一个界面

文章目录 步骤 1&#xff1a;创建新窗口类步骤 2&#xff1a;设计窗口的 UI步骤 3&#xff1a;设计响应函数 以下是一个完整的示例&#xff0c;展示在Qt中如何实现在一个窗口中通过点击按钮弹出一个新窗口。 步骤 1&#xff1a;创建新窗口类 假设你要创建一个名为 WelcomeWidg…
阅读更多...
dm8在Linux环境安装精简步骤说明(2024年12月更新版dm8)

dm8在Linux环境安装精简步骤说明(2024年12月更新版dm8)

dm8在Linux环境安装详细步骤 - - 2025年1月之后dm8 环境介绍1 修改操作系统资源限制2 操作系统创建用户3 操作系统配置4 数据库安装5 初始化数据库6 实例参数优化7 登录数据库配置归档与备份8 配置审计9 创建用户10 屏蔽关键字与数据库兼容模式11 jdbc连接串配置12 更多达梦数据…
阅读更多...
Spring MVC 综合案例

Spring MVC 综合案例

目录 一. 加法计算器 1. 准备工作 2. 约定前后端交互接口 需求分析 接口定义 3. 服务器端代码 4. 运行测试 二. 用户登录 1. 准备工作 2. 约定前后端交互接口 需求分析 接口定义 (1) 登录界面接口 (2) 首页接口 3. 服务器端代码 4. 运行测试 三. 留言板 1. 准备…
阅读更多...
神经网络|(一)加权平均法，感知机和神经元

神经网络|(一)加权平均法，感知机和神经元

【1】引言 从这篇文章开始&#xff0c;将记述对神经网络知识的探索。相关文章都是学习过程中的感悟和理解&#xff0c;如有雷同或者南辕北辙的表述&#xff0c;请大家多多包涵。 【2】加权平均法 在数学课本和数理统计课本中&#xff0c;我们总会遇到求一组数据平均值的做法…
阅读更多...
PostGIS笔记：PostgreSQL 数据库与用户 基础操作

PostGIS笔记：PostgreSQL 数据库与用户 基础操作

数据库基础操作包括数据模型的实现、添加数据、查询数据、视图应用、创建日志规则等。我这里是在Ubuntu系统学习的数据库管理。Windows平台与Linux平台在命令上几乎无差异&#xff0c;只是说在 Windows 上虽然也能运行良好&#xff0c;但在性能、稳定性、功能扩展等方面&#x…
阅读更多...
【精选】基于数据挖掘的招聘信息分析与市场需求预测系统 职位分析、求职者趋势分析 职位匹配、人才趋势、市场需求分析数据挖掘技术 职位需求分析、人才市场趋势预测

【精选】基于数据挖掘的招聘信息分析与市场需求预测系统 职位分析、求职者趋势分析 职位匹配、人才趋势、市场需求分析数据挖掘技术 职位需求分析、人才市场趋势预测

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…
阅读更多...
【Redis】常见面试题

【Redis】常见面试题

什么是Redis&#xff1f; Redis 和 Memcached 有什么区别&#xff1f; 为什么用 Redis 作为 MySQL 的缓存&#xff1f; 主要是因为Redis具备高性能和高并发两种特性。 高性能&#xff1a;MySQL中数据是从磁盘读取的&#xff0c;而Redis是直接操作内存&#xff0c;速度相当快…
阅读更多...
python学opencv|读取图像（四十二）使用cv2.add()函数实现多图像叠加

python学opencv|读取图像（四十二）使用cv2.add()函数实现多图像叠加

【1】引言 前序学习过程中&#xff0c;掌握了灰度图像和彩色图像的掩模操作&#xff1a; python学opencv|读取图像&#xff08;九&#xff09;用numpy创建黑白相间灰度图_numpy生成全黑图片-CSDN博客 python学opencv|读取图像&#xff08;四十&#xff09;掩模&#xff1a;三…
阅读更多...
将 OneLake 数据索引到 Elasticsearch - 第 1 部分

将 OneLake 数据索引到 Elasticsearch - 第 1 部分

作者&#xff1a;来自 Elastic Gustavo Llermaly 学习配置 OneLake&#xff0c;使用 Python 消费数据并在 Elasticsearch 中索引文档&#xff0c;然后运行语义搜索。 OneLake 是一款工具&#xff0c;可让你连接到不同的 Microsoft 数据源&#xff0c;例如 Power BI、Data Activ…
阅读更多...
开源项目Umami网站统计MySQL8.0版本Docker+Linux安装部署教程

开源项目Umami网站统计MySQL8.0版本Docker+Linux安装部署教程

Umami是什么&#xff1f; Umami是一个开源项目&#xff0c;简单、快速、专注用户隐私的网站统计项目。 下面来介绍如何本地安装部署Umami项目&#xff0c;进行你的网站统计接入。特别对于首次使用docker的萌新有非常好的指导、参考和帮助作用。 Umami的github和docker镜像地…
阅读更多...
Java程序基础⑪Java的异常体系和使用

Java程序基础⑪Java的异常体系和使用

目录 1. 异常的概念和分类 1.1 异常的概念 1.2 异常的分类 2. 异常的体系结构 3. 异常的处理 3.1 异常的抛出 3.2 异常的捕获与处理 3.3 异常的处理流程 4. 自定义异常类 4.1 自定义异常类的规则 4.2 自定义异常案例 1. 异常的概念和分类 1.1 异常的概念 在Java中&…
阅读更多...
大话特征工程：1.维数灾难与特征轮回

大话特征工程：1.维数灾难与特征轮回

一、维度深渊 公元 2147 年&#xff0c;人类文明进入了数据驱动的超级智能时代。从金融到医疗&#xff0c;从教育到娱乐&#xff0c;所有决策都仰赖“全维计算网络”&#xff08;高维特征空间&#xff09;。这套系统将全球所有信息抽象成数以亿计的多维特征&#xff08…
阅读更多...
libOnvif通过组播不能发现相机

libOnvif通过组播不能发现相机

使用libOnvif库OnvifDiscoveryClient类&#xff0c; auto discovery new OnvifDiscoveryClient(QUrl(“soap.udp://239.255.255.250:3702”), cb.Build()); 会有错误&#xff1a; end of file or no input: message transfer interrupted or timed out(30 sec max recv delay)…
阅读更多...
JVM常见知识点

JVM常见知识点

在《深入理解Java虚拟机》一书中&#xff0c;介绍了JVM的相关特性。 1、JVM的内存区域划分 在真实的操作系统中&#xff0c;对于地址空间进行了分区域的设计&#xff0c;由于JVM是仿照真实的机器进行设计的&#xff0c;那么也进行了分区域的设计。核心区域有四个&#xff0c;…
阅读更多...
Windows系统Tai时长统计工具的使用体验

Windows系统Tai时长统计工具的使用体验

Windows系统Tai时长统计工具的使用体验 一、Tai介绍1.1 Tai简介1.2 安装环境要求 二、下载及安装Tai2.1 下载Tai2.2 运行Tai工具 三、Tai的使用体验3.1 系统设置3.2 时长统计3.3 分类管理 四、总结 一、Tai介绍 1.1 Tai简介 Tai是一款专为Windows系统设计的开源软件&#xff…
阅读更多...
【架构面试】二、消息队列和MySQL和Redis

【架构面试】二、消息队列和MySQL和Redis

MQ MQ消息中间件 问题引出与MQ作用 常见面试问题&#xff1a;面试官常针对项目中使用MQ技术的候选人提问&#xff0c;如如何确保消息不丢失&#xff0c;该问题可考察候选人技术能力。MQ应用场景及作用&#xff1a;以京东系统下单扣减京豆为例&#xff0c;MQ用于交易服和京豆服…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023