JS地下城 - 4F- 世界時鐘

作品

WORLD CLOCK

世界時鐘

JavaScript

主要語法 .toLocaleString( )

• .toLocaleString('en-US', 物件形式選項)
• 利用不同選項產生要的資訊
• 建立陣列，放入不同國家名稱以及 timeZone 名稱
• 利用 forEach，將此資料陣列組成字串
  • .toLocaleString('en-US', 日期資訊)
  • .toLocaleString('en-US', 時間資訊)

參考範例

const date = new Date()
let options = {
  hour: '2-digit',   //(e.g., 02)
  minute: '2-digit', //(e.g., 02)          
  hour12: false,     // 24 小時制
  day: 'numeric',    //(e.g., 1)
  month: 'short',    //(e.g., Oct)
  year: 'numeric',   //(e.g., 2020)
}
let countries = {
  country: 'New York', 
  timeZone: 'America/New_York'
}
console.log(date.toLocaleString('en-US', {...countries, ...options}))
// "Jan 6, 2021, 03:30"

CSS

利用 :first-child 與 :last-child 覆蓋原有配色

---

時間 Data()

將 Date()作為建構物件後，可以取用內建的方法，像是 :

• getFullYear()
• getMonth()，月份從 0 開始，因此得+1才能正確顯示
• getDate()
• toLocaleString()，本地時間

let date = new Date()
let str = `${date.getFullYear()+1}年 ${date.getMonth()+1}月 ${date.getDate()}日`
console.log(str)
console.log(date.toLocaleString())
// "2021年 1月 7日"
// "2021/1/7 上午9:55:56"

格林威治平均時間（Greenwich Mean Time, GMT）

以前不是有聽過電台撥放，中原標準時間，其實 GMT 是藉由在地球上觀測太陽的結果，算出一天多久後，再細分成小時、分、秒，再依照世界地區劃分，最終我們所在的台灣則是在 GMT +8 的時區內，而中原標準時間則是跟中華民國歷史有關，它所劃分的地區，就是 GMT +8。

世界協調時間（Coordinated Universal Time, UTC）

利用宇宙中穩定一致的無線電波源週期性的訊號，搭配電波源抵達地球時觀測的角度，直接計算地球的自轉與公轉速率，再以此計算一年、一天、時分秒的平均長度。
縮寫為世界一致的 Universal Time Coordinated, UTC
與國際度量衡標準相聯繫，所以目前所有的國際通訊系統，像是衛星、航空、GPS 等等，全部都協議採用 UTC 時間。

科學界使用更加穩定的 UTC。

TimeStamp

1970年， Unix正式誕生，也因此 TimeStamp 由 1970/01/01 開始計算，網路上有很多轉換器，都可以算出年月日。

• Unix TimeStamp 為秒數
• JavaScript TimeStamp 為毫秒數

console.log(Date.now())
// 產生毫秒數，到現在的時間為止

console.log(Date.UTC(2021, 0, 1))
// 1609459200000
// 月份從 0 開始

為什麼需要 TimeStamp ?

雖然可以使用內建的方法取得年月日，但是所顯示的時間格式可能會不一致，若儲存為 TimeStamp，不僅較為單純也統一格式為數字，不論哪個語言都能使用。除了統一格式外，也可以利用 TimeStamp做出倒數計時、比對時間等等功能。

參考範例

const dateFn = (time) => {
  let date = new Date(time)
  console.log(
    date.getTime(),     // 毫秒數
    date.getFullYear(), // 年
    date.getMonth(),    // 月
    date.getDate(),     // 日
    date.getHours(),    // 小時
    date.getMinutes(),  // 分
    date.getSeconds(),  // 秒
    date.toUTCString(), // 格林威治標準時間 +0
    date.toString(), // 本地時間(台北標準時間) +8
    // 可以更改地點取得該時區時間
    date.toLocaleString('en-US', {timeZone: 'America/New_York'}) 
  )
}
// 被視為本地時區，正常取得時間
dateFn('2021-1-1')  
// 1609430400000 ，毫秒數
// 2021 0 1 0 0 0 ，年月日時分秒
// "Thu, 31 Dec 2020 16:00:00 GMT" ，格林威治標準時間，也就是 UTC時間
// "Fri Jan 01 2021 00:00:00 GMT+0800 (台北標準時間)" 
// "12/31/2020, 11:00:00 AM" ，美國紐約時間

// 被視為格林威治標準時間，台灣時間會多 8小時
dateFn('2021-01-01')         

// ISO-8601 格式，被視為格林威治標準時間，台灣時間會多 8小時
dateFn('2021-01-01T00:00:00Z') 

// Date() 內建日期字串轉毫秒數，但不同瀏覽器會有差異，不推薦
dateFn(Date.parse('2021-1-1')) 

// 格林威治標準時間，台灣時間會多 8小時
dateFn(Date.UTC(2021, 0, 1))   

// 被視為本地時區，正常取得時間
dateFn(new Date(2021, 0, 1)) 

參考來源

1. Mujing Tsai - JS世界時間表
2. Wikipedia - List of tz database time zones
3. Charles Hong - JavaScript 取得各國的日期與時間
4. 泛科學 - 到底是 GMT+8 還是 UTC+8 ?
5. Will - 前端工程研究：關於 JavaScript 中 Date 型別的常見地雷與建議作法
6. JavaScript 时间与日期处理实战:你肯定被坑过