현재 날짜와 시간을 가져오기 위해 JavaScript API를 사용하여 현재 날짜와 시간 가져오기

JavaScript는 개발자가 날짜, 시간 및 시간대를 쉽게 처리할 수 있는 API를 제공합니다. 이 기사에서는 JavaScript의 날짜 및 시간 API를 사용하여 현재 날짜와 시간을 가져오고 형식을 지정하며 기타 작업을 수행하는 방법을 알아봅니다.

JavaScript의 날짜 및 시간 소개

웹 개발에서는 날짜와 시간 처리가 불가피합니다. 이는 날짜와 시간, 카운트다운 타이머, 타임스탬프를 표시하고 이벤트를 예약하고 시간 요소와의 사용자 상호 작용을 처리하기 위해 다양한 온라인 애플리케이션에서 사용됩니다. JavaScript에는 날짜 및 시간 작업을 위한 핵심 도구인 Date 개체가 내장되어 있습니다.

한정된 가격으로 상품을 판매하는 웹사이트(예: 전자상거래 웹사이트)를 방문한 적이 있나요? 아니면 레스토랑 웹사이트의 개장 카운트다운인가요? 아니면 웹사이트에 시간 제한이 있는 애니메이션이 있나요? 다음은 날짜 및 시간 API를 사용한 웹 개발에 대한 다양한 시나리오의 몇 가지 예입니다.

현재 날짜와 시간 가져오기

이제 JavaScript에 내장된 Date 개체를 사용하여 현재 날짜와 시간을 어떻게 얻을 수 있나요? 이것은 매우 간단합니다. 현재 날짜와 시간을 가져오기 위해 매개 변수 없이 Date 개체의 새 인스턴스를 만들기만 하면 됩니다. 다음으로 현재 날짜와 시간을 콘솔에 기록합니다.

으아악

현재 날짜와 시간이 다음 형식으로 콘솔에 기록됩니다. 日-月-日-年时-分-秒时区。例如：Tue Jul 25 2023 12:37:10 GMT+0100（西非标准时间）.

Date 개체는 또한 연도, 월, 일, 시, 분, 초, GMT 및 시간대와 같은 날짜 및 시간의 다양한 구성 요소를 추출하는 방법을 제공합니다. 예는 다음과 같습니다.

으아악

이 코드는 현재 날짜와 시간을 포함하는 새로운 Date 对象，其中包含当前日期和时间。然后它使用 Date 对象的各种方法，例如 getFullYear()、getMonth()、getHours() 和 getMinutes() 개체를 만듭니다. 그런 다음 getFullYear()

,

getMonth()

, getHours()와 같은 <p></p> <p> 개체의 다양한 메서드를 사용합니다. </p> 및

getMinutes(),
1. 는 날짜와 시간의 다양한 구성요소를 추출합니다. 또한 시간대를 얻기 위해 몇 가지 계산을 수행했습니다. 이 코드를 실행하면 콘솔에 현재 연도, 월, 시, 분, 시간대가 표시됩니다. 결과는 현재 코드 실행 날짜와 시간에 따라 달라집니다. <span>npm </span><span>install</span><span> moment</span>
2. 날짜 및 시간 형식 설정<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment%20.min.js"></script>
JavaScript의 날짜와 시간은 특정 요구에 맞게 형식을 지정할 수도 있습니다. 위에서 사용된 Date 객체는 날짜와 시간의 다양한 구성요소를 추출하고 기본 기능을 구현하는 메소드를 제공합니다. 그러나 특정 요구 사항에 맞게 날짜 및 시간 형식을 지정하려면 몇 가지 추가 단계가 필요합니다. Moment.js, Luxon.js, Date-fns, Day.js 등을 포함하여 날짜 및 시간 형식을 지정하는 데 사용할 수 있는 여러 JavaScript 라이브러리가 있습니다. 이번 섹션에서는 Moment.js 라이브러리에 대해 알아봅니다.

Moment.js 라이브러리 사용을 시작하려면 해당 라이브러리를 프로젝트에 포함해야 합니다. 다음 두 가지 방법 중 하나를 사용하여 이 작업을 수행할 수 있습니다.

터미널이나 명령줄에 다음 명령을 입력하여 npm을 사용하여 설치합니다. <p>npm </p> <p>install</p>🎜 moment🎜 🎜 🎜 CDN에서 프로젝트에 연결하세요. Moment.js를 프로젝트에 연결하려면 HTML 파일의 head 태그에 추가하세요: 🎜 🎜 🎜 으아악 🎜출력은 🎜2023-07-25 13:04:38🎜입니다(날짜 및 시간 출력은 코드를 실행한 시간입니다). Moment.js의 형식 함수는 다양한 형식 문자열을 허용하여 필요에 따라 출력을 사용자 정의합니다. 이 예에서는 연도, 월, 일, 시, 분, 초만 표시하도록 형식을 지정합니다. 🎜 🎜Moment.js 라이브러리 사용을 보여주는 또 다른 예는 다음과 같습니다. 🎜 으아악 🎜다음 코드 줄의 기능은 다음과 같습니다. 🎜

• 第一行代码使用库中的 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를 사용하여 현재 날짜와 시간 가져오기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!