獲取當前日期和時間的利用JavaScript API獲取當前日期和時間

JavaScript 提供的 API 使開發人員能夠輕松處理日期、時間和時區。在本文中，我們將了解如何使用 JavaScript 的日期和時間 API 來獲取當前日期和時間、設置它們的格式以及執行其他操作。

JavaScript 中的日期和時間簡介

在 Web 開發中處理日期和時間是不可避免的。它在各種在線應用程序中用于顯示日期和時間、倒計時器和時間戳，以及安排事件和處理用戶與時間元素的交互。 JavaScript 有一個內置的 date 對象，它是處理日期和時間的關鍵工具。

您是否曾經訪問過某個網站（例如電子商務網站），該網站在有限的時間內以折扣價展示商品？或者餐廳網站上的開業倒計時？或者網站上正在計時的動畫？這些是使用日期和時間 API 進行 Web 開發的許多場景的一些示例。

獲取當前日期和時間

現在我們如何使用 JavaScript 中的內置 Date 對象來獲取當前日期和時間？這很簡單。您需要做的就是創建一個不帶任何參數的 Date 對象的新實例來獲取當前日期和時間。接下來，將當前日期和時間記錄到控制臺。

立即學習“Java免費學習筆記（深入）”；

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 庫，您需要將其包含在您的項目中。您可以使用以下兩種方法之一來執行此操作：

1. 通過在終端或命令行中輸入以下命令來使用 npm 安裝它： npm install moment
2. 將其從 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 開發人員的必備技能，它可以顯著提高應用程序的功能和可用性。