這篇講解的是我如何從頭開始研究Javascript時區轉換相關API，以及一些時區相關的奇怪專有詞，最後做出世界時間表，我會盡使用淺顯易懂的方式來說明，如果你看完還是對內容有疑問，可以直接聯絡我 ，一起交流。順帶一提，你沒看錯現在是早上4:30 (X_X)。
Outline
- TimeStamp是什麼?
- GTM+8 與 UTC+8 ? 差在哪?
- toLocaleTimeString的使用
- 補充：DOM 操作 — cloneNode
TimeStamp是什麼?
TimeStamp 可以想成是某個執行動作的時間點，經常我們在操作資料的時候（最常見新增/修改），會希望留下時間紀錄，以免出問題的時候可以追查。就像公家單位的公文在蓋章的時候都會有時間戳記，系統也是ㄧ樣，只不過有時候不是我們常見的日期格式。
要用js觀察TimeStamp，可以在瀏覽器下:
Date.now(); //1549041946540
你應該可以得到奇怪的一串數字，類似這樣
1549041946540
這個是什麼意思呢？是指從 1970/01/01開始至今的秒數，也就是TimeStamp。
為什麼是1970年？據說那是工程師們自己訂的，Unix系統的誕生日期。一樣透過Date物件可以把這串秒數轉成一般的TimeString:
new Date(Date.now()) // Sat Feb 02 2019 01:32:14 GMT+0800 (台北標準時間)
TimeString 也是String，只不過有一定的格式，才能給Date相關api讀取。
有興趣的人可參考這篇 。
GTM+8 與 UTC+8 ? 差在哪?
其實這兩種格式在一般使用的情況下沒有差別，只是GTM是歷史沿革，UTC是後來科學家發現一種可以更準確測量時間的方式而訂出的格式，他們之間的時間差只在區區幾秒之間（但這足以讓某些科學家抓狂），總之，因為GTM這個格式已經被國際使用許久，所以就算UTC出現以後，還是沒有消失 (跟IEㄧ樣，號稱時代的眼淚，但你不消失我才會流淚)。
W3School的解釋：
The UTC() method returns the number of milliseconds between a specified date and midnight of January 1, 1970, according to universal time. Tip: The Universal Coordinated Time (UTC) is the time set by the World Time Standard. Note: UTC time is the same as GMT time.
基本上把他看做ㄧ樣就行了（除非你真的無法無視閏秒XD）我自己一般還是習慣使用UTC格式。
new Date(Date.now()).toUTCString() // 拿到目前UTC+0 的時間
toLocaleTimeString的使用
Js裡面時間相關api有很多，要算出不同時區的時間其實有不只一種方式，這裡用我覺得比較直觀的toLocaleTimeString()，第一個參數是語系，在後面的Option裡面可以設定很多格式，timeZone就是用來設定時區：
let now = new Date(Date.now())
let month= now.toLocaleDateString(‘en-US’,{timeZone:’Your Time Zone’’,month:’long’})
TimeZone 的格式可以參考這個列表，我拿到時區後，直接綁在html上面，這樣在一開始渲染時，就可以直接拿到，非常直接。
<li class=”zone London bg-white” id=”London” time-zone=”Europe/London” >…</li>
option 兩個常用設定值
- 在Option裡面除了設定timeZone，也可以設定時制
{…hour12:false} //24小時制
- 甚至可以直接拿到完整的月份名字，如此一來就不需要另外寫月份的mapping表:
let now = new Date(Date.now())
let month= now.toLocaleTimeString(‘en-US’,{timeZone,month:’long’})
//”February, 3:44:46 PM”
補充：DOM 操作 — cloneNode
這邊比較特別的是，因為重複的版型我習慣利用類似template的方式去做，所以我在底下區塊把重複的結構拉出來：
<div id=”zone-template” style=”display:none”>
<div class=”country”>
<div class=”name”>NEW YORK</div>
<i class=”date”>27 JAN,2019</i>
</div>
<div class=”time”>02:46 </div>
</div>
然後在畫面啟動的時候在去跑回圈一個一個掛到<li>裡面，記得使用cloneNode，確保這個版型能夠成功複製到每個區塊，如果單純用appendChild可能會有問題，詳情可以參考這篇。
