# JavaScript題目04 - 各地時區
* 完成範例：[CodePen](https://codepen.io/liu_0821/pen/poqxBKm)、[Medium](https://medium.com/@LindaLiu0821/javascript%E5%9C%B0%E4%B8%8B%E5%9F%8E04-%E5%90%84%E5%9C%B0%E6%99%82%E5%8D%80-24f7b94e86cf)

> 4F - 各地時區

### 使用語法
* HTML、CSS（SCSS）、JS（Vue）
> yo~ yo~ yo~這次換了新的語法來寫了嘿嘿( ～‧ ω ‧)～

### 攻略要點
1. 【特定技術】僅能使用原生 JS 開始，不能使用套件。
2. 【特定技術】特別注意必須用 JS 處理各國時區。
3. 介紹JavaScript 如何提供 GMT、UTC 時區語法&何謂 TimeStamp

### 關於時間的JavaScript語法（GMT、UTC、TimeStamp）
> 一般來說，GMT 和 UTC 在一般使用的情況下沒有差別，台灣的時區是 UTC+8 或是 GMT+8 都可以。
#### GMT
> 稱為格林威治標準時間，時間從每天中午12點太陽經過英國倫敦郊區的格林威治天文臺開始算起。

2023年10月13日 05:22:26 (GMT)

#### UTC
> 稱為世界協調時間，是目前最主要的世界時間標準，時間則由午夜起量度。

2023年10月13日 01:12:13 (UTC)

#### TimeStamp
> 通俗稱為時間戳，從西元 1970 年 1 月 1 日的 00:00:00 這個時間到現在的總秒數。

var timestamp = new Date().getTime(); //建立時間戳
// console.log(1690214400000)

### 拆解步驟
1. 先刻劃HTML與CSS，這次不太一樣的地方是CSS改成用`SCSS`撰寫。
* 要讓第一個跟最後一個顏色改用黑色是用<font color=blue>`:first-child`</font>&<font color=blue>`:last-child`</font>下去修改的唷~（要另外寫`class`區分也是一個好辦法!!!）
2. 接下來是這次的JS改採用`Vue`撰寫
* 先設定一個陣列儲存<font color=cake>地區</font>跟<font color=cake>TimeZone</font>
* 先用`forEach`跑出各個地區的時間
* 再用`new Date(time)`算出各地的標準完整時間出來，接下來就是各種取值
* 其中`monthName`的參數中有個`month`的設定可以取出月份縮寫
* 設定日期與時間有讓他小於兩位數前面會自動補零
* 最特殊的是這個`$set`，讓他更新陣列裡面的內容，有看到其他同學們的提問，更多詳細內容可以看參考資料那邊

3. 最後的最後，設定一個`setInterval()`讓他每秒更新就可以了唷，結束。

### 結尾
* 個人認為`CSCC` 跟`SASS`比較不同的地方是在於用==括號==替代了==縮排==，且在<font color=blue>`@mixin`</font>上面`CSCC`是用<font color=red>`@include`</font>召喚出來，而`SASS`則是用<font color=red>`+`</font>，所以如果要說哪個好用或是更適合，我覺得見人見智（老大當然還是原生CSS），不過我比起`SASS`的縮排眼睛看得~~木颯颯~~，更喜歡`CSCC`唷✧*｡٩(ˊᗜˋ*)و✧*｡
* 這次的挑戰感覺跟時鐘很類似（~~覺得比時鐘簡單~~），比較困難的地方是在於原來時間還有這麼多種用法使用，尤其是`timeZoom`是之前沒有接觸過的覺得很新奇，之後也會出一篇文章介紹唷~
* 在處理時區的時候發現有個好用的套件(在參考資料那邊唷！！)

### 參考資料
* [感覺很好用的時區套件筆記](https://hackmd.io/@Burgess/BkbSFgQq9)
* [`$set`是什麼](https://ithelp.ithome.com.tw/articles/10206422)
* [`GMT`&`UTC`是什麼](https://pansci.asia/archives/84978)

---

##### ヽ(∀ﾟ )人(ﾟ∀)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀)人( ﾟ∀)ﾉヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)人(∀ﾟ )人( ﾟ∀)人

##### 以上 如果哪裡有錯誤或有問題，歡迎提出來一起討論~~~~