[使用技術]
- 原生 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 上的用法:
dateObj.toLocaleString([locales[, options]])
需要填入一些參數像是 locales 以及可選的 options,locales 需要的參數可以參考這篇。
整合資料後,我得出這個結果:
let d = new Date();
d.toLocaleString('zh-TW', { timeZone: 'Asia/Taipei', hour12: false });
zh-TW 代表想使用的時間格式,timeZone 後面接著目標時區。
如果想要以同樣的格式指定取得澳洲雪梨的時間可以怎麼做?
d.toLocaleString('zh-TW', { timeZone: 'Australia/Sydney', hour12: false });
基本上知道這些,這題已經快做完了,剩下就只要做一些字串處理就好了,最後補上 setInterval 就達成了。
[額外補充]
何謂 UTC / GMT
其實從 MDN 上的這一段敘述就可略知一二,世界標準時間(UTC)也被稱為格林威治標準時間(GMT)被指定作為世界時間的標準。然而如果需要更精確的解釋則可以參考世界協調時間、到底是 GMT+8 還是 UTC+8 ?。
何謂 TimeStamp
可以透過這一篇有趣的漫畫了解,於 JavaScript 中的使用方式是這樣的:
let timestamp = Math.floor(Date.now() / 1000);
// 1550577930
如何還原成我們看得懂的時間呢?
let time = new Date(1550577930 * 1000);
// Tue Feb 19 2019 20:05:30 GMT+0800 (台北標準時間)