Je code donc je suis là.

0%

JavaScript Date & Times 時間處理

new Date() 物件的時間處理

我們常需要在網頁上處理或顯示時間,例如文章是何時編輯的、購物時間或是在觀察程式碼的效能時也會需要時間的處理,JavaScript 是如何處理日期和時間的呢?

JavaScript 包含了一個處理時間的物件:new Date(),透過這個構造式裡的方法或參數,我們可以精準的計算任何形式的時間。在這個物件的時間計算單位為毫秒(1000 毫秒為一秒),所以處理時需要另外除以 1000 才能得到我們熟悉的秒數。

Date()物件是基於世界標準時間(UTC) 1970 年 1 月 1 日開始的毫秒數值來儲存時間的。要得到當下的時間是很容易的,這個當下時間來自於我們本身使用的電腦當下的時間,而電腦的時間,有可能是透過網路而得到電腦當下所在時區的時間。但如果我們想要「計算時間」就必須透過一些方式與計算,例如想要計算不是在同時需的時間,或是要對某個時間點做倒數。

我們先來看看Date - JavaScript | MDN 怎麼解釋。

構造函式 new Date()

因為是構造式,創建時間的物件須先以new Date()創建,所回傳的值是一個封裝好的物件,以這個構造式被執行的時間點為標記傳回時間。

1
2
let date = new Date();
console.log(date); // Sat Aug 08 2020 15:36:59 GMT+0200 (中歐夏令時間)

以上的範例傳回// Sat Aug 08 2020 15:36:59 GMT+0200 (中歐夏令時間)
如果我們沒有給Date()任何參數,回傳的會是依電腦系統的設定,產生當下時間的 Date 物件。

以參數的方式取得時間

Date()可接受多種格式參數,回傳一個該參數對應的時間。

  • 參數為字串:如果想指定我們所需要的特定日期(月/日/年)時間(時:分:秒),傳入一個表示時間的字串作為參數,回傳值則是我們指定的日期時間。
  • 參數為毫秒:參數為時間零點開始計算的毫秒數,回傳從 1970/1/1 00:00:00 開始算起的時間點。
  • 參數為多個整數值:參數為代表年、月、日、小時、分鐘、秒、毫秒,回傳對應的時間。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 參數為時間零點開始計算的毫秒數
let date1 = new Date(157821628600);
// Wed Jan 01 1975 16:20:28 GMT+0100 (中歐標準時間)
// 從 1970/1/1 00:00:00 開始算起的時間點

// 參數為字串的時間日期
let date2 = new Date('08/08/2020');
// Sat Aug 08 2020 00:00:00 GMT+0200 (中歐夏令時間)
let date3 = new Date('08/08/2020 12:42:24');
// Sat Aug 08 2020 12:42:24 GMT+0200 (中歐夏令時間)

// 參數為多個整數值: 年、月、日、小時、分鐘、秒、毫秒
let date4 = new Date(2020, 8, 8, 0, 0, 0, 0);
// Tue Sep 08 2020 00:00:00 GMT+0200 (中歐夏令時間)

只要是能被Date.parse()解析的字串,都可以當作是Date()的參數,所以不同的參數寫法都可以得到相同的時間。

1
2
3
4
5
6
7
8
9
new Date('2020/5/8');
new Date('2020-8-8');
new Date('05/8/2020');
new Date('2020-August-8');
new Date('August 8, 2020');
new Date('August, 8, 2020');
new Date('8, August, 2020');
new Date('8 August 2020');
// Sat Aug 08 2020 00:00:00 GMT+0200 (中歐夏令時間)

Date() 以物件的方法取得時間計算

Date()包含了許多的方法,透過呼叫這些方法,可以得到較為細節的時間,以下我們只介紹我們常用的方法。

get*() 得到特定的時間,並回傳整數

以 get 開頭的方法顧名思義是用來取得時間的,以字串為參數,直接指定時間,回傳的整數皆以 0 為起始,以星期來說,0 為週日、月份 0 為一月,以此類推。

1
2
3
let date = new Date('08/08/2020 12:42:24');
console.log(date); // Sat Aug 08 2020 12:42:24 GMT+0200 (中歐夏令時間)
let day = date.getDay(); // 回傳數字 6 ,表示 08/08/2020 這天是週六

以下為常用的get*()方法

  • getTime():回傳當下時間距離 1970 年 1 月 1 日 00:00:00 的毫秒數
  • getDate():回傳當下時間對應每個月的幾號(從 1 開始)。
  • getDay():回傳星期幾,星期日為 0,星期一為 1,以此類推。
  • getFullYear():回傳四位的年份。
  • getMonth():回傳月份(0 表示 1 月,11 表示 12 月)。
  • getHours():回傳小時(0-23)。
  • getMilliseconds():回傳毫秒(0-999)。
  • getMinutes():回傳分鐘(0-59)。
  • getSeconds():回傳秒(0-59)。
1
2
3
4
5
6
7
let date = new Date();
let time = date.getTime();
// 回傳的是從1970年到至今的時間
console.log(time / 1000 / 60 / 60 / 24 / 365);
// 得到的時間值除以毫秒單位/秒單位/分單位/時單位/日單位
// 50.63727990001903
// 從1970 到現在 08/08/2020 共經過了50.637年

如果把戳印時間減去現在時間,原本應該是得到 0,卻回傳-3600000,是因為時區不同的原因,

1
2
3
4
5
6
7
8
9
let testDate = new Date('1/1/1970 0:0:0');
console.log(testDate);
// Thu Jan 01 1970 00:00:00 GMT+0100 (中歐標準時間)
// 現在時間
let nowTime = testDate.getTime();
console.log(nowTime); // -3600000
// 和標準時間相差值
let differTime = nowTime / 1000 / 60 / 60;
console.log(differTime); // -1 差一小時

now()回傳當下的時間戳印

可利用now()方法得到當下的時間,利用時間的戳印特性來測試程式碼的執行效能

1
2
3
4
5
6
7
8
9
let start = Date.now();
console.log(start);

for (let i = 0; i < 1000; i++) {
// console.log(i);
}
let end = Date.now();
console.log(end);
console.log(`執行了${end - start}毫秒`);

取執行前和執行後的時間戳印相減,即可得執行時間

set*() 設置時間的方法

以 set 為開頭的方法,主要以設定時間為主,set*()來設定當下的時間點,常用的有:

  • setDate(date):設置當前時間對應的每個月的幾號(1-31),返回改變後時間(毫秒)。
  • setFullYear(year):設置四位數的年份。
  • setHours(hour):設置小時(0-23)。
  • setMilliseconds():設置毫秒(0-999)。
  • setMinutes(min):設置分鐘(0-59)。
  • setMonth(month):設置月份(0-11)。
  • setSeconds(sec):設置秒(0-59)。
  • setTime(milliseconds):設置毫秒時間。

Timer 設定定時的方法

使用定時的方法可以讓我們時做出不同的效果,另如定時器、倒數、重複時間循環。

setTimeout()

setTimeout()用來指定某個函數或某段 code 在多少毫秒之後執行。
此方法有兩個參數: setTimeout(function|code, delay);
setTimeout(將要延遲執行的函式或 code, 延遲執行的毫秒數),如果省略第二個參數,則默認為 0(也就沒有延遲的意義並馬上執行)。

clearTimeout()

取消` setTimeout()`設的定時器。

setInterval()

setTimeout()完全一致,差別在於setInterval()可以無限次的設置定時器的執行。
此方法有兩個參數:setInterval(function|code, delay);第一參數為執行的函式或程式、第二參數為延遲的毫秒數。

clearInterval()

取消setInterval()設的定時器。

實作電子時鐘