搜尋
首頁CMS教程&#&按取得目前日期和時間的利用JavaScript API取得目前日期和時間

获取当前日期和时间的利用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 函式庫,您需要將其包含在您的專案中。您可以使用以下兩種方法之一來執行此操作:

  1. 透過在終端機或命令列中輸入以下命令來使用 npm 安裝它: <span>npm </span><span>install</span><span> moment</span>
  2. 將其從 CDN 連結到您的專案。要將 Moment.js 連結到您的項目,請將其新增至 HTML 檔案的 head 標籤: <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment%20.min.js"></script>
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”记录到控制台。输出将是 startDateendDate 之间的天数。在此示例中,输出将为 The days Difference is: 16,表示 2023 年 7 月 1 日到 2023 年 7 月 17 日之间有 16 天。

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

结论

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

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

以上是取得目前日期和時間的利用JavaScript API取得目前日期和時間的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
我可以在3天內學習WordPress嗎?我可以在3天內學習WordPress嗎?Apr 09, 2025 am 12:16 AM

能在三天內學會WordPress。 1.掌握基礎知識,如主題、插件等。 2.理解核心功能,包括安裝和工作原理。 3.通過示例學習基本和高級用法。 4.了解調試技巧和性能優化建議。

WordPress是CMS嗎?WordPress是CMS嗎?Apr 08, 2025 am 12:02 AM

WordPress是內容管理系統(CMS)。它提供內容管理、用戶管理、主題和插件功能,支持創建和管理網站內容。其工作原理包括數據庫管理、模板系統和插件架構,適用於從博客到企業網站的各種需求。

WordPress有什麼用?WordPress有什麼用?Apr 07, 2025 am 12:06 AM

wordpressgood forvortalyanewebprojectDuetoItsAsatilityAsacms.itexcelsin:1)用戶友好性,允許Aeserywebsitesetup; 2)sexibility andcustomized andcustomization and numerthemesandplugins; 3)seoop timigimization; and4)and4)

我應該使用Wix或WordPress嗎?我應該使用Wix或WordPress嗎?Apr 06, 2025 am 12:11 AM

Wix適合沒有編程經驗的用戶,WordPress適合希望有更多控制和擴展能力的用戶。 1)Wix提供拖放式編輯器和豐富模板,易於快速搭建網站。 2)WordPress作為開源CMS,擁有龐大社區和插件生態,支持深度自定義和擴展。

WordPress的成本是多少?WordPress的成本是多少?Apr 05, 2025 am 12:13 AM

WordPress本身免費,但使用需額外費用:1.WordPress.com提供從免費到付費的套餐,價格從每月幾美元到幾十美元不等;2.WordPress.org需購買域名(每年10-20美元)和託管服務(每月5-50美元);3.插件和主題多數免費,付費的價格在幾十到幾百美元之間;通過選擇合適的託管服務、合理使用插件和主題、定期維護和優化,可以有效控制和優化WordPress的成本。

WordPress仍然免費嗎?WordPress仍然免費嗎?Apr 04, 2025 am 12:06 AM

WordPress核心版本是免費的,但使用過程中可能產生其他費用。 1.域名和託管服務需要付費。 2.高級主題和插件可能需要付費。 3.專業服務和高級功能可能需要付費。

對於初學者來說,WordPress容易嗎?對於初學者來說,WordPress容易嗎?Apr 03, 2025 am 12:02 AM

WordPress對初學者來說容易上手。 1.登錄後台後,用戶界面直觀,簡潔的儀表板提供所有必要功能鏈接。 2.基本操作包括創建和編輯內容,所見即所得的編輯器簡化了內容創建。 3.初學者可以通過插件和主題擴展網站功能,學習曲線存在但可以通過實踐掌握。

為什麼有人會使用WordPress?為什麼有人會使用WordPress?Apr 02, 2025 pm 02:57 PM

人們選擇使用WordPress是因為其強大和靈活性。 1)WordPress是一個開源的CMS,易用性和可擴展性強,適合各種網站需求。 2)它有豐富的主題和插件,生態系統龐大,社區支持強大。 3)WordPress的工作原理基於主題、插件和核心功能,使用PHP和MySQL處理數據,支持性能優化。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具