# [JS30] Day2. Clock
###### tags: `JS30`
## 任務 Task
做出指針時鐘能同步電腦時間，並做出指針移動效果。

==完成時間：1hr==
## 步驟 Step
1. 建立函式 `function setDate()`
2. 使用 `setIntervel` 設定每秒更新一次函式。
3. 抓取電腦時間 `Date()` 並使用各別的時、分、秒函式，抓取當前時、分、秒的數字。
4. 計算出當前時間離初始時間旋轉多少度。
5. 更改 `second-hand` `min-hand` `hour-hand` 的 `.style.transform = "rotate(deg)"` 的角度。

## 筆記 Note
### JS new Date()
* 抓取當前時間
* 可使用其 `prototype`
| prototype | return | description |
|:--------------:|:------:|:-----------:|
| .getMonth() | 0-11 | 月份 |
| .getDate() | 1-31 | 月份中日期 |
| .getDay() | 0-6 | 星期 |
| .getFullYear() | 四位數 | 年份 |
| .getHours() | 0-23 | 小時 |
| .getMinutes | 0-59 | 分鐘 |
| .getSeconds | 0-59 | 秒數 |

### JS setInterval
* 常見時間控制函數有 `setTimeout()` 及 `setInterval()`
1. `setTimeout(function, time)`
* 於指定的毫秒數後呼叫函式，只執行一次。
2. `setInterval(function, time)`
* 每隔指定毫秒數迴圈呼叫函式，無限執行。
* 可使用 `clearTimeout(function)` 清除執行，但必須設一個 `variable` 給 `setInterval` 。
### CSS transform-origin
* 設定 `transform` 的起始點，常用於 `rotate()`、`scale()`
* 用法：

transform-origin: 10px 20px; /*x軸移動10pxY軸移動20px*/ 
transform-origin: 100%; /*x軸Y軸移動本身100%*/  

### CSS cubic-bezier（Timing function）
* `transition-timing-function` 可以設定時間函式。
* 常見有 `linear`、`ease`、`cubic-bezier`。
* `cubic-bezier` 為二次貝茲曲線，可在開發者工具內去拉動。
* 參考：https://ithelp.ithome.com.tw/articles/10195313
## 遇到問題 Problem
:::danger
⚠️ <font color=black>Problem</font>
:::
在旋轉一圈後，因為 `secondDegrees` 變回 `0` 以及設定`transition: all 0.05s`導致會出現指針倒轉回去 `0.05s` 的感覺。
:::info
:ok_hand: <font color=black>Revise</font>
:::
==影片提供的方法是：==
1. 把 CSS 的 `transition` 拿掉，可是就不會有指針移動的效果。
2. 讓 `secondsDegrees`不停的加上去，讓他不會歸零，我沒有想到要怎麼做，而且感覺瀏覽器會爆掉XD

==我的解決方法是：==

if(secondsDegrees == 90){
  secondHand.style.transition = `none`;
    }else{
       secondHand.style.transition = `all 0.05s cubic-bezier(0.1,2.7,0.58,1)`;
      }

* 當 `secondsDegrees` 轉到整點時，就把 `transition` 的效果拿掉，其他時間就加入`transition`，同時 `CSS` 的 `transtion` 就可以拿掉了。

:exclamation: 不過在跳到整點的==那一秒==就不會有 `transition` 效果，解法還不夠完善。
## 想法 Idea
:::warning
:bulb: <font color=black>把指針改成數字時鐘</font>
:::

### 方法 method
* 一樣用 `Date()` 去抓各個數字。
* 用`innerText` 去改變 `Html` 文字。
* 用文字的地方，`Array` 所有月份、星期等文字，搭配`Date()` 的數字去抓文字。
* 特別要注意數字為個位數的地方，十位數要補 `0` ，方法有很多，我用的是最爛的方法哈哈。

第二名作品🥈
<iframe height="300" style="width: 100%;" scrolling="no" title="Digital Clock" src="https://codepen.io/jim876633/embed/XWZPeJa?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/jim876633/pen/XWZPeJa">
Digital Clock</a> by Jim (<a href="https://codepen.io/jim876633">@jim876633</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 🔮 Annie method
* 用 `padStart` 填充數字，可惡太厲害。

第一名作品🥇
<iframe height="300" style="width: 100%;" scrolling="no" title="Digital Clock" src="https://codepen.io/annie-chien/embed/XWZPMyM?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/annie-chien/pen/XWZPMyM">
Digital Clock</a> by Annie-Chien (<a href="https://codepen.io/annie-chien">@annie-chien</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 連結
* [padStart用法](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String/padStart)
* [配色網站](https://www.palettable.io/253849)