預覽圖
本層 BOSS 弱點
- 【特定技術】僅能使用原生 JS ，不能使用套件
- 【特定技術】特別注意必須用 JS 處理各國時區
- 【書寫能力】請寫一篇 Blog 來介紹你的挑戰過程，並介紹 JavaScript 如何提供 GMT、UTC 時區語法，以及何謂 TimeStamp
使用技術
- 原生 JavaScript
- SCSS
心得
這一層樓切版算容易，JavaScript 部分也不困難，我認為這一層樓要點在於「資料蒐集」，也就是當遇到不知道怎麼寫的時候，如何靠自己的力量找到答案。
因為這層樓只要找到 toLocaleString() 方法，並了解使用方式、有什麼參數可以使用，那麼這一題基本上就解完了。
當然這題還有其他解法，只是我認為使用 toLocaleString() 很方便，只要代入想要的時間格式、地區，就可以拿到資料了，省去蠻多計算的。
過程
我的想法滿簡單的，因為是關於時間的處理，自然而然想到 Date()，但我不清楚裡面有什麼方法可以幫助我，畢竟要做的是時區的轉換，從先前的經驗得知 MDN 可能會有我要的東西，於是關鍵字是這麼下的「JS Date() MDN」。
第一筆就是我要的結果，點開可以看到 MDN 對於 Date 物件的描述：
- Date 物件是基於世界標準時間（UTC） 1970 年 1 月 1 日開始的毫秒數值來儲存時間。
- JavaScript
Date物件提供了若干 UTC (通用的) 以及本地時間方法。UTC，也被稱為格林威治標準時間（GMT）被指定作為世界時間的標準。本地時間指的是被設定在執行 JavaScript 電腦上的時間。
基本上 MDN 就能得到相當充足的資訊，接著繼續往下看，可以知道更多掛在 Date 物件下的方法，最後找到
- Date.prototype.toLocaleString() - 回傳依系統的地區設定導出的日期時間字串。
就是這個了，還很佛心的附有範例呢 !
但是還沒結束，因為根據 MDN 上的用法：
1 | dateObj.toLocaleString(\[locales\[, options\]\]) |
需要填入一些參數像是 locales 以及可選的 options， locales 需要的參數可以參考這篇。
整合資料後，我得出這個結果：
1 | let d = new Date(); |
zh-TW 代表想使用的時間格式， timeZone 後面接著目標時區。
如果想要以同樣的格式指定取得澳洲雪梨的時間可以怎麼做?
1 | d.toLocaleString('zh-TW', { timeZone: 'Australia/Sydney', hour12: false }); |
基本上知道這些，這題已經快做完了，剩下就只要做一些字串處理就好了，最後補上 setInterval 就達成了。
額外補充
何謂 UTC / GMT
其實從 MDN 上的這一段敘述就可略知一二，世界標準時間（UTC）也被稱為格林威治標準時間（GMT）被指定作為世界時間的標準。然而如果需要更精確的解釋則可以參考世界協調時間、到底是 GMT+8 還是 UTC+8 ?。
何謂 TimeStamp
可以透過這一篇有趣的漫畫了解，於 JavaScript 中的使用方式是這樣的：
1 | let `timestamp =` Math.floor(Date.now() / 1000); |
如何還原成我們看得懂的時間呢？
1 | let time = new Date(1550577930 \* 1000); |