获取当前日期和时间的利用JavaScript API获取当前日期和时间

wufei123 2024-06-02 阅读:34 评论:0
JavaScript 提供的 API 使开发人员能够轻松处理日期、时间和时区。在本文中,我们将了解如何使用 JavaScript 的日期和时间 API 来获取当前日期和时间、设置它们的格式以及执行其他操作。 JavaScript 中的日期...

获取当前日期和时间的利用javascript api获取当前日期和时间

JavaScript 提供的 API 使开发人员能够轻松处理日期、时间和时区。在本文中,我们将了解如何使用 JavaScript 的日期和时间 API 来获取当前日期和时间、设置它们的格式以及执行其他操作。

JavaScript 中的日期和时间简介

在 Web 开发中处理日期和时间是不可避免的。它在各种在线应用程序中用于显示日期和时间、倒计时器和时间戳,以及安排事件和处理用户与时间元素的交互。 JavaScript 有一个内置的 Date 对象,它是处理日期和时间的关键工具。

您是否曾经访问过某个网站(例如电子商务网站),该网站在有限的时间内以折扣价展示商品?或者餐厅网站上的开业倒计时?或者网站上正在计时的动画?这些是使用日期和时间 API 进行 Web 开发的许多场景的一些示例。

获取当前日期和时间

现在我们如何使用 JavaScript 中的内置 Date 对象来获取当前日期和时间?这很简单。您需要做的就是创建一个不带任何参数的 Date 对象的新实例来获取当前日期和时间。接下来,将当前日期和时间记录到控制台。

const currentDate = new Date(); console.log(currentDate);

这将以以下格式将当前日期和时间记录到您的控制台上:日-月-日-年时-分-秒时区。例如:Tue Jul 25 2023 12:37:10 GMT+0100(西非标准时间)。

Date 对象还提供了提取日期和时间的各个组成部分的方法,例如年、月、日、小时、分钟、秒、GMT 和时区。这是一个例子:

const currentDate = new Date(); const year = currentDate.getFullYear(); const month = currentDate.getMonth() + 1; const hour = currentDate.getHours(); const minute = currentDate.getMinutes(); const timezoneOffsetHours = gmtOffsetInMinutes / -60; const timezoneOffsetString = timezoneOffsetHours >= 0 ? `+${timezoneOffsetHours}` : `-${Math.abs(timezoneOffsetHours)}`; console.log(`Year: ${year}`); console.log(`Month: ${month}`); console.log(`Hour: ${hour}`); console.log(`Minute: ${minute}`); console.log(`Timezone Offset: GMT${timezoneOffsetString}`);

此代码创建一个新的 Date 对象,其中包含当前日期和时间。然后它使用 Date 对象的各种方法,例如 getFullYear()getMonth()、getHours()getMinutes(), 提取日期和时间的各个组成部分。我们还做了一些计算来获取时区。当您运行此代码时,您将在控制台上看到当前的年、月、小时、分钟和时区。请记住,结果将取决于代码执行的当前日期和时间。

设置日期和时间的格式

JavaScript 中的日期和时间也可以格式化以满足特定需求。上面使用的 Date 对象提供了提取日期和时间的各个组成部分并实现基本功能的方法。然而,要格式化日期和时间以满足特定需求,需要一些额外的步骤。有一些 JavaScript 库可用于格式化日期和时间,其中包括 Moment.js、Luxon.js、Date-fns、Day.js 等。在本节中,我们将了解 Moment.js 库。

要开始使用 Moment.js 库,您需要将其包含在您的项目中。您可以使用以下两种方法之一来执行此操作:

  • 通过在终端或命令行中输入以下命令来使用 npm 安装它: npm install moment
  • 将其从 CDN 链接到您的项目。要将 Moment.js 链接到您的项目,请将其添加到 HTML 文件的 head 标记中:
  • const currentDate = new Date(); const formattedDateTime = moment(currentDate).format("YYYY-MM-DD HH:mm:ss"); console.log(formattedDateTime);

    其输出为2023-07-25 13:04:38(日期和时间输出是我运行代码时的时间)。 Moment.js 中的格式函数接受各种格式字符串以根据需要自定义输出。在本例中,我们将其格式化为仅显示年、月、日、小时、分钟和秒。

    演示 Moment.js 库使用的另一个示例是:

    const addMinutes = moment().add(5, 'minutes'); console.log(`${addMinutes.format('h:mm a')}`); const subtractDays = moment().subtract(3, 'days'); console.log(`${subtractDays.format('dddd, MMMM Do YYYY')}`)

    以下是这些代码行的作用:

    • 第一行代码使用库中的 moment() 函数创建一个表示当前日期和时间的新 moment 对象。然后在此 moment 对象上调用 add() 方法,为其添加 5 分钟。传递给 add() 方法的第一个参数是要添加的单位数。传递的第二个参数是要添加的时间单位(在本例中为“分钟”)。
    • 第二行代码是将格式化的日期和时间记录到浏览器控制台的代码。在上一行创建的新 moment 对象上调用 format() 方法。它接受一个字符串作为参数来指定我们希望显示日期和时间的格式。在本例中,格式为:'h:mm a'。 “h”代表小时,“mm”代表 12 小时制格式的分钟,“a”代表 AM/PM 名称。例如,如果时间是 5:30,我们添加 5 分钟,那么时间将是 5:35。
    • 第三行代码与第一行非常相似,但它执行不同的操作。它使用库中的 moment() 函数创建一个表示当前日期和时间的新时刻对象。然后,在此 moment 对象上调用 subtract() 方法,从中减去 3 天。与 add() 方法一样,传递给 subtract() 方法的第一个参数是要减去的单位数。传递的第二个参数是要减去的时间单位(在本例中为“天”)。
    • 在第四行代码中,我们将格式化的日期和时间记录到控制台。在新创建的 moment 对象上调用 format() 方法,它接受一个字符串作为参数来指定我们要显示日期的格式。我们指定的格式是“dddd, MMMM Do YYYY”。 “dddd”代表完整的工作日名称,“MMMM”代表完整的月份名称,“Do”代表带后缀的月份中的日期,“YYYY”代表年份。假设当前日期是 2023 年 7 月 25 日,我们从中减去 3 天。日期将为“2023 年 7 月 22 日星期六”。

    这是如何使用 Moment.js 在 JavaScript 中操作日期和时间的快速演示。

    时区处理

    正确处理时区对于与多个国家/地区的用户交互的应用至关重要。默认情况下,JavaScript 中的 Date 对象使用用户的系统时区。然而,它不提供对特定时区工作的直接支持。使用 ECMAScript 国际化 API (ECMA-402) 中的 Intl.DateTimeFormat 对象来有效管理时区。该格式允许您以本地化格式显示日期和时间信息,包括时区数据。

    以下是如何显示特定时区的当前日期和时间的快速演示:

    const date = new Date(Date.UTC(2023, 6, 25, 3, 0, 0)); console.log(new Intl.DateTimeFormat("en-US").format(date)); console.log(new Intl.DateTimeFormat("en-GB").format(date)); console.log(new Intl.DateTimeFormat('en-GB', { dateStyle: 'full', timeStyle: 'long', timeZone: 'long', timeZone: 'Australia/Sydney' }).format(date));
    • 第一行代码创建一个新的Date对象,名为date,表示日期和时间。
    • 在第二行代码中,我们使用 Intl.DateTimeFormat 对象将 date 格式化为美国英语语言环境。 format() 方法用于格式化日期对象,然后返回格式化日期的字符串表示形式。在美国英语区域设置中,格式为月-日-年顺序。因此输出将为 7/25/2023。
    • 第三行代码也是如此,但在本例中,我们将 date 格式化为英式英语语言环境。格式为日-月-年顺序。因此输出将为 25/07/2023。
    • 第四行使用 Intl.DateTimeFormat 对象,并提供以英式英语语言环境格式化 date 的选项,并将时区设置为“澳大利亚/悉尼”。 “dateStyle”选项设置为“full”,“timeStyle”选项设置为“long”。 “完整”日期样式提供日期的完整文本表示,“长”时间样式提供时间的长文本表示。 “timeZone”选项设置为“澳大利亚/悉尼”,这意味着日期和时间将以澳大利亚悉尼时区显示。

    输出将如下所示:2023 年 7 月 25 日星期二 13:00:00 GMT+10。实际输出可能会因您当前的时区而异。

    请注意,在上面的示例中,我们使用“6”代表七月,而不是“7”,后者代表月份位置。这是因为,在 JavaScript 中,Date 对象(以及 Intl.DateTimeFormat 对象)的月份参数是从零开始的,这意味着一月由 0 表示,二月由 1 表示,依此类推。因此,要表示 7 月,您应该使用 6 而不是 7,而对于 8 月,您应该使用 7 而不是 8。

    执行日期和时间操作

    JavaScript 中的 Date 对象提供了多种执行日期和时间操作的方法,例如计算两个日期之间的差异、添加或删除时间间隔以及比较日期。一些常用的方法有 getTime()、setTime()、getFullYear()、getMonth()、getDate()、getHours()、phpcn cphpcn>getMinutes () 和 getSeconds()。 这些操作对于计算持续时间、设置截止日期和处理应用程序中与时间相关的逻辑等任务至关重要。

    以下示例说明了如何计算两个日期之间的差异:

    const startDate = new Date("2023-07-01"); const endDate = new Date("2023-07-17"); const timeDifference = endDate.getTime() - startDate.getTime(); const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); console.log(`The days difference is: ${daysDifference}`); 代码说明
    • 第一行代码创建一个新的 Date 对象,表示日期 2023 年 7 月 1 日。Date 构造函数使用 和格式为“YYYY-MM-DD”的日期字符串来指定所需的开始时间日期。
    • 另一个新的 Date 对象表示日期 2023 年 7 月 17 日,也是使用指定格式的结束日期创建的。
    • 第三行代码是计算两个新创建的日期对象“endDate”和“startDate”之间的差异。 getTime()方法用于获取每个Date对象的时间值。通过从 endDate 时间值减去 startDate 时间值,我们得到两个日期之间的时间差(以毫秒为单位)。
    • 第四行代码:要计算两个日期之间的差异,请将“timeDifference”(以毫秒为单位)除以一天中的毫秒数,即 1000 毫秒乘以 60 秒乘以 60分钟乘以 24 小时。结果就是两个日期之间的天数差。 Math.floor() 函数用于将结果向下舍入到最接近的整数,以确保我们得到代表天数的整数。
    • 第五行代码将“daysDifference”记录到控制台。输出将是 startDate 和 endDate 之间的天数。在此示例中,输出将为 The days Difference is: 16,表示 2023 年 7 月 1 日到 2023 年 7 月 17 日之间有 16 天。

    总之,代码示例使用 Date 对象和简单的算术运算来计算两个提供的日期之间的天数差异(startDate 和 endDate)。这对于许多与日期相关的计算非常有用,例如确定两个事件之间的持续时间或给定截止日期之前的天数。

    结论

    在本文中,我们探讨了在 JavaScript 中处理日期和时间的各个方面。我们讨论了如何执行常见的日期和时间计算,包括添加和减去时间间隔、比较日期以及计算日期之间的差异。我们还探索了流行的 Moment.js 库,它提供了处理日期和时间的附加功能。本文还向我们展示了如何使用 Intl.DateTimeFormat 对象格式化日期和时间。

    最后,学习 JavaScript 中的日期和时间 API 使开发人员能够在各个领域创建功能强大、用户友好且对时间敏感的应用程序,从简单的时间显示到计时器倒计时,再到复杂的调度和事件处理。了解如何有效地使用日期和时间数据是任何 JavaScript 开发人员的必备技能,它可以显着提高应用程序的功能和可用性。

    以上就是获取当前日期和时间的利用JavaScript API获取当前日期和时间的详细内容,更多请关注知识资源分享宝库其它相关文章!

    版权声明

    本站内容来源于互联网搬运,
    仅限用于小范围内传播学习,请在下载后24小时内删除,
    如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
    E-mail:dpw1001@163.com

    分享:

    扫一扫在手机阅读、分享本文

    发表评论
    热门文章
    • BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)

      BioWare埃德蒙顿工作室面临关闭危机,龙腾世纪制作总监辞职引关注(龙腾.总监.辞职.危机.面临.....)
      知名变性人制作总监corrine busche离职bioware,引发业界震荡!外媒“smash jt”独家报道称,《龙腾世纪:影幢守护者》制作总监corrine busche已离开bioware,此举不仅引发了关于个人职业发展方向的讨论,更因其可能预示着bioware埃德蒙顿工作室即将关闭而备受关注。本文将深入分析busche离职的原因及其对bioware及游戏行业的影响。 Busche的告别信:挑战与感激并存 据“Smash JT”获得的内部邮件显示,Busche离职原...
    • 闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)

      闪耀暖暖靡城永恒怎么样-闪耀暖暖靡城永恒套装介绍(闪耀.暖暖.套装.介绍.....)
      闪耀暖暖钻石竞技场第十七赛季“华梦泡影”即将开启!全新闪耀性感套装【靡城永恒】震撼来袭!想知道如何获得这套精美套装吗?快来看看吧! 【靡城永恒】套装设计理念抢先看: 设计灵感源于夜色中的孤星,象征着淡然、漠视一切的灰色瞳眸。设计师希望通过这套服装,展现出在虚幻与真实交织的夜幕下,一种独特的魅力。 服装细节考究,从面料的光泽、鞋跟声响到裙摆的弧度,都力求完美还原设计初衷。 【靡城永恒】套装设计亮点: 闪耀的绸缎与金丝交织,轻盈的羽毛增添华贵感。 这套服装仿佛是从无尽的黑...
    • python怎么调用其他文件函数

      python怎么调用其他文件函数
      在 python 中调用其他文件中的函数,有两种方式:1. 使用 import 语句导入模块,然后调用 [模块名].[函数名]();2. 使用 from ... import 语句从模块导入特定函数,然后调用 [函数名]()。 如何在 Python 中调用其他文件中的函数 在 Python 中,您可以通过以下两种方式调用其他文件中的函数: 1. 使用 import 语句 优点:简单且易于使用。 缺点:会将整个模块导入到当前作用域中,可能会导致命名空间混乱。 步骤:...
    • 斗魔骑士哪个角色强势-斗魔骑士角色推荐与实力解析(骑士.角色.强势.解析.实力.....)

      斗魔骑士哪个角色强势-斗魔骑士角色推荐与实力解析(骑士.角色.强势.解析.实力.....)
      斗魔骑士角色选择及战斗策略指南 斗魔骑士游戏中,众多角色各具特色,选择适合自己的角色才能在战斗中占据优势。本文将为您详细解读如何选择强力角色,并提供团队协作及角色培养策略。 如何选择强力角色? 斗魔骑士的角色大致分为近战和远程两种类型。近战角色通常拥有高攻击力和防御力,适合冲锋陷阵;远程角色则擅长后方输出,并依靠灵活走位躲避攻击。 选择角色时,需根据个人游戏风格和喜好决定。喜欢正面硬刚的玩家可以选择战士型角色,其高生命值和防御力能承受更多伤害;偏好策略性玩法的玩家则可以选择法...
    • 奇迹暖暖诸星梦眠怎么样-奇迹暖暖诸星梦眠套装介绍(星梦.暖暖.奇迹.套装.介绍.....)

      奇迹暖暖诸星梦眠怎么样-奇迹暖暖诸星梦眠套装介绍(星梦.暖暖.奇迹.套装.介绍.....)
      奇迹暖暖全新活动“失序之圜”即将开启,参与活动即可获得精美套装——诸星梦眠!想知道这套套装的细节吗?一起来看看吧! 奇迹暖暖诸星梦眠套装详解 “失序之圜”活动主打套装——诸星梦眠,高清海报震撼公开!少女在无垠梦境中,接受星辰的邀请,馥郁芬芳,预示着命运之花即将绽放。 诸星梦眠套装包含:全新妆容“隽永之梦”、星光面饰“熠烁星光”、动态特姿连衣裙“诸星梦眠”、动态特姿发型“金色绮想”、精美特效皇冠“繁星加冕”,以及动态摆件“芳馨酣眠”、“沉云余音”、“流星低语”、“葳蕤诗篇”。...