這篇講解的是我如何從頭開始研究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 的格式可以[參考這個列表](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones),我拿到時區後,直接綁在html上面,這樣在一開始渲染時,就可以直接拿到,非常直接。
<li class=”zone London bg-white” id=”London” time-zone=”Europe/London” >…</li>
option 兩個常用設定值
1. 在Option裡面除了設定timeZone,也可以設定時制
{…hour12:false} //24小時制
2. 甚至可以直接拿到完整的月份名字,如此一來就不需要另外寫月份的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可能會有問題,詳情可以參考這篇。
謝謝你耐心看完我的文章,如果我的文章對你有幫助,請幫我拍手拍好拍滿:
有禮=10手
支持=20手
中肯=30手
讚賞=40手
激賞=50手
讓我有些回饋,就有動力寫出更多文章跟大家分享,再次感謝,期待下次與大家分享!