JavaScript 日期和時間

在本教程中,你將學習如何使用 JavaScript 中的日期和時間。

使用日期物件

Date 物件是一個內建的 JavaScript 物件。它允許你通過瀏覽器訪問計算機系統時鐘來獲取使用者的本地時間。Date 物件還提供了幾種管理、操作和格式化日期和時間的方法。

建立日期物件

在我們開始使用日期和時間之前,我們需要建立一個 Date 物件。與其他內建物件(如陣列或函式)不同,日期沒有相應的文字形式:所有日期物件都需要使用 Date 建構函式 Date() 來建立。

在 JavaScript 中建立 Date 物件有四種不同的方法。

new Date() 語法

你可以簡單地宣告一個新的 Date 物件而不初始化它的值。在這種情況下,日期和時間值將設定為執行指令碼的使用者裝置上的當前日期和時間。

var d = new Date();
document.write(d);

new Date(year, month, ...) 語法

你還可以通過傳遞以逗號分隔的以下引數來初始化 Date 物件:年、月、日、小時、分鐘、秒和毫秒。

年份和月份引數是必需的,其他引數是可選的。

var d = new Date(2018,0,31,14,35,20,50);
document.write(d);

該日期實際上代表 2018 年 1 月 31 日 14:35:20 和 50 毫秒。如果願意,你可以忽略時間部分並僅指定日期部分。

new Date(dateString) 語法

JavaScript 還允許你通過傳遞表示日期或日期和時間的字串來建立 Date 物件,如以下示例所示:

var d = new Date("31 January 2018");
document.write(d);

此日期表示 2018 年 1 月 31 日。你還可以指定 2018 年 1 月 31 日之類的字串,或任何一些有效的變體,JavaScript 將自動處理該字串。

new Date(milliseconds) 語法

你還可以通過傳遞 1970 年 1 月 1 日格林威治標準時間 00:00:00 之後的毫秒數來定義 Date 物件。這一次被稱為 UNIX 時代,因為 1970 年是 UNIX 作業系統正式推出的那一年。這是一個例子:

var d = new Date(1517356800000);
document.write(d);

上述日期為 2018 年 1 月 31 日星期三 05:30:00 GMT 0530。

一旦建立了 Date 物件的例項,就可以使用其方法執行各種任務,例如獲取日期的不同元件,設定或修改單個日期和時間值等。這些方法將在下面詳細介紹部分。

注: JavaScript 提供用於被稱為 literals 的快捷方法來建立大多數的原生物件,這樣就不必使用 new 操作符,例如 new Object()new Array() 等等。

獲取當前日期和時間

要獲取當前日期和時間,請建立新的 Date 物件而不傳遞任何引數。這將建立一個具有當前日期和時間的物件。這是一個例子:

var now = new Date();
alert(now); // Display the current date and time

此示例的輸出將類似於此(取決於時區偏移):

Mon Oct 29 2018 19:58:09 GMT+0100 (Central European Standard Time)

建立日期和時間字串

JavaScript 的日期物件提供了幾種方法,諸如 toDateString()toLocaleDateString() 等,以生成不同格式的日期字串。這是一個例子:

var d = new Date();
alert(d.toDateString()); // Display an abbreviated date string
alert(d.toLocaleDateString()); // Display a localized date string
alert(d.toISOString()); // Display the ISO standardized date string
alert(d.toUTCString()); // Display a date string converted to UTC time
alert(d.toString()); // Display the full date string with local time zone

同樣,你可以使用 Date 物件的 toLocaleTimeString()toTimeString() 方法生成時間字串,如以下示例所示:

var d = new Date();
alert(d.toTimeString()); // Display the time portion of the date
alert(d.toLocaleTimeString()); // Display a localized time string

獲取特定的日期和時間元件

一旦有了正確的日期物件,就可以使用許多方法從中提取詳細資訊,例如月份、日期、小時或分鐘值等。以下部分描述了從中提取單個資訊的各種方法。日期物件。

獲得年、月和日

Date 物件提供了幾個方法,如 getFullYear()getMonth()getDay() 等,你可以用它來提取 Date 物件的具體日期元件,如分別年月日、星期幾,等等。以下示例演示如何使用以下方法從 Date 物件獲取特定日期元件:

var d = new Date();
// Extracting date part
alert(d.getDate()); // Display the day of the month
alert(d.getDay()); // Display the number of days into the week (0-6)
alert(d.getMonth()); // Display the number of months into the year (0-11)
alert(d.getFullYear()); // Display the full year (four digits)

getDay() 方法返回表示星期幾(從 0 到 6)的數字,而不是返回諸如星期日或星期一之類的名稱,如果它是星期日,則返回 0; 如果是星期一,則該方法返回 1,依此類推。

同樣,getMonth() 方法返回月數(從 0 到 11)而不是月份名稱。這裡 0 表示一年中的第一個月。因此,如果是 1 月,則方法返回 0 而不是 1; 如果是 8 月,則該方法返回 7。

獲得小時、分鐘、秒和毫秒

類似地,日期物件提供類似的方法 getHours()getMinutes()getSeconds()getTimezoneOffset() 等從日期物件中提取的時間分量。

var d = new Date();
// Extracting time part 
alert(d.getHours()); // Display the number of hours into the day (0-23)
alert(d.getMinutes()); // Display the number of minutes into the hour (0-59)
alert(d.getSeconds()); // Display the seconds into the minute (0-59)
alert(d.getMilliseconds()); // Display the number of milliseconds into second (0-999)
alert(d.getTime()); // Display the number of milliseconds since 1/1/1970
alert(d.getTimezoneOffset()); // Display the time-zone offset (from Greenwich Mean Time) in minutes

getHours() 方法根據 24 小時制返回當天的小時數(從 0 到 23)。所以,當它是午夜時,方法返回 0; 當它是下午 3 點時,它返回 15。

注意: Date 物件還具有獲取 UTC 元件的方法,在 get 後面只要加上 UTC 就可以,如 getUTCDate()getUTCHour()getUTCMinutes() 等。

設定日期和時間值

除了檢索日期和時間值之外,你還可以使用 JavaScript 設定或修改這些值。這通常用於必須將日期物件的值從一個特定日期或時間更改為另一個特定日期或時間的程式中。讓我們看看它是如何工作的。

設定年、月和日期

Date 物件提供的方法,例如 setFullYear()setMonth()setDate() 方法,分別設定 Date 物件的年份、月份、日期。

例如,在下面的示例中,我們使用 setFullYear() 方法在將來兩年之前更改儲存在變數中的當前日期。

var d = new Date();
d.setFullYear(d.getFullYear() + 2);
alert(d); // Display future date

上面示例的輸出將如下所示:

Thu Oct 29 2020 19:58:09 GMT+0100 (Central European Standard Time)

同樣,你可以使用 setMonth() 方法設定或修改 Date 物件的月份部分。

var d = new Date(); // Current date and time
d.setMonth(0); // Sets month to 0, January
document.write(d);

setMonth() 方法需要 0 到 11 之間的整數值,如果你將月份的值設定為大於 11,則日期物件的年份值將遞增。

換句話說,值為 12 會導致年份值增加 1,月份值設定為 0,如以下示例所示:

var d = new Date(2018, 5, 24); // June 24, 2018
d.setMonth(12); // Sets month to 12, new date will be January 24, 2019
document.write(d);

同樣,你可以修改日期物件的日期部分,如下所示:

var d = new Date(2018, 5, 24); // June 24, 2018
d.setDate(15); // Sets date to 15, new date will be June 15, 2018
document.write(d);

setDate() 方法需要 1 到 31 之間的整數值。此外,如果你傳遞的值大於該月中的天數,則該月將遞增。例如:

var d = new Date(2018, 5, 24); // June 24, 2018
d.setDate(36); // Sets day to 36, new date will be July 6, 2018
document.write(d);

設定小時、分鐘和秒

設定時間值的方法也很簡單。setHours()setMinutes()setSeconds()setMilliseconds() 可以用來分別設定日期物件中的小時、分鐘、秒和毫秒部分。

每個方法都將整數值作為引數。小時範圍從 0 到 23,分鐘和秒的範圍從 0 到 59,毫秒範圍從 0 到 999。以下是一個示例:

var d = new Date(2018, 5, 24); // June 24, 2018 00:00:00
d.setHours(8);
d.setMinutes(30);
d.setSeconds(45);
d.setMilliseconds(600);
document.write(d);

上面示例的輸出類似於以下內容:

Sun Jun 24 2018 08:30:45 GMT+0200 (Central European Summer Time)