(前端學習紀錄)六角學院-新手JS地下城-4F.時區

董劭杰
Feb 4, 2021

--

這次的地下城題目是時區,基本上就是用照規格先排好版,然後取不同時區的時間再組好字串丟到頁面上,算是相對比較簡單的一關。

主要的難點應該是在於確定時區,以及要如何使用toLocaleString()函數來將時間轉成需要的格式。

Demo:點我嘛
Code:點我啦

HTML/CSS:

刻版部份相對簡單,基本上照著線上設計稿上的間距和字型等等的來調整就可以了,在不同城市的黑白色調呈現上,先在css裡寫好不同的class名稱對應的顏色,然後在JS中的增加相應屬性方便函式直接抓值做呈現。

JS:

JS部份簡單來說就是:
用new Date()取時間
:arrow_down:
再用toLocaleString()搭配設置好的options來取得要的格式
:arrow_down:
抓相應的值組字串然後直接innerHTML()呈現
差不多就完成了:coffee: :coffee: :coffee:

就像前面說的,花最多時間的事在於確認各個城市的時區,還有toLocaleString()的options的屬性設置,然後其實就做完了,這一關的學習重點應該就是在抓時間以及時區的語法上,後面也來提一下關於 GMT、UTC ,以及何謂 TimeStamp。

說明啊~(我流):

GMT:就是格林威治標準時間,由格林威治天文台的觀測員通過觀測太陽每天仰角最高的時間點(又叫「過中天」),連續紀錄365天後進行平均後得出的。
UTC:協調世界時,其實就是用某個時間點的GMT時間做為基準,但不用天文觀測的方式,改以銫原子進行固定震盪次數來計算秒數(原子鐘)。
兩者理論上是相同的,但隨著地球自轉其實在變慢,所以通過觀測的GMT實際上會漸漸的比UTC慢,這也導致了閏秒的產生,從而被某人安排成一場最終決戰的高潮...(有機會再來重看一輪噬謊者吧)。

名詞解釋的話大概就是這樣,而在JS部份其實網路上大部分資料寫的都一模一樣,所以有點懶得再來一次…看完後覺得應該會常用的函式就是new Date()、getTimezoneOffset()跟Date.UTC,嗯,我就懶。

TimeStamp:時間戳,其實就是以格林威治時間1970年01月01日00時00分00秒為基準,通過計算當下或者指定時間與該時間的秒數差值得出的一串數字,格式簡單,方便轉換,很適合存在以數字為基礎建構的系統當中,感覺用這個當梗來寫在小說裡面也是滿好用的~

碎碎念:

工作上…好像可能應該大概是要有事情做了,不過年前有可能嗎?…反正就是努力學習努力寫東東吧,目標是年前要完成popo徵文的活動以及penana上的一個挑戰~

--

--

董劭杰
董劭杰

Written by 董劭杰

0 Followers

對自己做的到的事都有興趣,從活動企劃轉職前端工程師,目前已經順利找到兩位前世情人,並持續以維繫自生的世界穩固為人生目標

No responses yet