[Hero Of UnderGround 地下城] — 4F World Clock 各國時區

成果 & 程式碼

Demo:點我

Code Source:點我

Introduction & 前言

三個月前開始了從零開始的學Code之路,碰了一陣子的JS,大概上個月撞見了Udemy然後買了幾個課程,加上一直都有再關注六角學院,偶然間發現了『新手JS地下城』,剛好最近在練習JS,心想這不正是上天的旨意嗎?!

最初以為第一層大概都過不了了吧,結果就晃啊晃,騙吃騙喝到了4F。

廢話太多了(誤

Summary & 摘要

Clock Img

由於JS地下城每個BOSS的弱點都不一樣,每一層都要由弱點去進行攻略,本次BOSS的弱點有三項。

  • 【特定技術】僅能使用原生 JS 開始,不能使用套件

  • 【特定技術】特別注意必須用 JS 處理各國時區

  • 【書寫能力】請寫一篇 BLOG 來介紹你的挑戰過程,並介紹 JavaScript 如何提供 GMT、UTC 時區語法,以及何謂 TimeStamp。

某些小地方偷偷用了Jquery (逃


使用 toLocaleString() Method

由於剛接觸JS不久,好多東西都是第一次接觸,看了很多範例,爬了無數的文後決定使用 toLocaleString。

  • 設定一個變數來接,然後再帶入各地區的值
1
2
let GotTime = new Date().toLocaleString(location, 
{ timeZone: location2});
  • 設定地區的變數帶入location及location2
1
2
3
4
5
function SetTime() {
let TW = MyClock('zh-TW', 'Asia/Taipei');
let BK = MyClock('zh-TW', 'Asia/Bangkok');
...等等
}

基本上會出現這樣的結果 → 2019/2/27 下午2:56:36

為了統一我把第一個變數都設定為 zh-TW 所以前面都是下午

  • 修改時間為24小時制 & 取得需要的部分
1
2
3
4
5
function MyClock(location, location2) {
let GotTime = new Date().toLocaleString(location,
{ timeZone: location2, hour12: false });
return GotTime.split(" ");
}

在第二個變數後加上 hour12: false 改為24小時制,另外我先把他們先變成陣列,之後方便再重新排列。


善用 split() Method & slice Method

  • 重新排列時間 & 月份
1
2
3
4
5
6
7
8
9
function SetDate(location) {
// 設定月份英文
let months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];

// 設定日期並重新排列順序及修改成英文月份
let date = location.split('/');
let date2 = date[2] + ' ' + months[date[1] - 1] + ' ' + date[0]
return date2;
}

這邊先設定月份的變數,然後使用 split(’/’) 把時間變成 2019227 ,然後再重新排列時間,另外 (months[date[1] — 1] ),因為陣列是從0開始的,不扣會跑到下個月去。

p.s:這邊的 location 跟一開始的 location 及 location2 並沒有關係!

時間重新排列後會出現結果 → 27 FEB 2019

  • 設定變數帶入 location
1
2
3
4
5
function SetTime() {
let BK_D = SetDate(BK[0]);
let TW_D = SetDate(TW[0]);
...等等
}

這個 function 和上面那個是同一個,這樣才能抓到我們BK跟TW變數的值。

1
2
3
$('.NEW-YORK-Time').html(TW[1].slice(0, 5));

$('.TW-date').html(TW_D);

最後再用html替換掉原本預設的字就行了,這邊也需要用到 slice(star,end) 抓取我們重新排列後需要的時間。

Finish Img


何謂 GMT、UTC 時區 ? 引用泛科知識

  • GMT 格林威治平時 (Greenwich Mean Time)

    這是一個大家都熟悉且習慣了的名字,至1884年確立,1924年開始向全世界播報時間。
    觀察者隨時監控太陽在天空的位置,把每天最高的仰角記錄下來,這個時間點稱作「過中天」。一般理解為兩次的「過中天」相隔等於24小時,也就是一天,但是一年之中會有「比較長的一天」與「比較短的一天」。
    所以觀測者必須要至少連續觀測一年,然後求取 365 個長度不一的「天」,再把他們全部平均後,得到固定的一天長度,之後再細分成時、分、秒等單位。這個就是GMT。

  • UTC 世界時(Universal Time Coordinated)

    利用宇宙中穩定一致的無線電波源週期性的訊號,搭配電波源抵達地球時觀測的角度,直接計算地球的自轉與公轉速率,再以此計算一年、一天、時分秒的平均長度。
    但是地球的自轉正在緩慢減速,所以GMT的一秒會越來越久,UTC總會有一天超過它,所以管理UTC的機構IERS(International Earth Rotation and Reference Systems Service)選擇加入閏秒。

  • 結論

兩個都是「長時間尺度下的平均太陽日」,但是遵循國際標準,台灣的時區會寫成「UTC+8」。正常下我們不會去在意到一秒的差距,用UTC就對了!

WTX Timestamp ( UNIX Timestamp、POSIX Timestamp ) ?

被定義在 1970年1月1日(00:00:00 GMT) 的時間,其實就是UNIX生產的年代,那時候的工程師們把那天定義為起始點。
產出來的數字會以秒數表現,1551253485 例如這樣,這是從1970年1月1日到這天的秒數。

  • 那我要怎麼轉換?

點我進入神奇的地方

各種語言轉換方式


Conclusion & 結論

這次練習到了不只是如何抓取時間,還學到了怎麼用Function去簡化我的程式碼,達到簡潔的效果,另外自覺陣列跟Function還有邏輯的部分是自己需要加強的。

最後我想最需要加強的是文筆啦啦啦,第一次寫Blog,覺得這邏輯比JS邏輯還難,總想著要簡明扼要打出重點,結果就屁話一堆la。

最後簡單列出需要檢討的地方,然後朝下一關邁進,完畢。

  • JS

  • 邏輯

  • 體重


我的其他範例

  • Hero Of UnderGround — 1F Multiplicatio 九九乘法表

    Demo:點我

    Code Source:點我

  • Hero Of UnderGround — 2F Clock 時鐘

    Demo:點我

    Code Source:點我

  • Hero Of UnderGround — 3F Calculator 計算機

    Demo:點我

    Code Source:點我

參考網站