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

發表於 更新於 分類於 ， ， 文章字數： 3k 所需閱讀時間 ≈ 3 分鐘

成果 & 程式碼

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：點我

參考網站