本次的挑戰是「CSS + JS Clock」，需要達成的目標是：
「時鐘的指針會轉動，指針都必須依據現實時鐘的規則前進。」
這次需要搭配 CSS 動畫，製作時鐘的指針旋轉效果。此次挑戰涉及以下內容：
- 指針旋轉動畫
- 現實時鐘的邏輯
- 取得現實時間
- 隔一段時間更新畫面
嘗試拆解流程
發現自己一開始的思維太專注在現實時鐘的規則，導致比較像在做計時器，不是時鐘XD這是修改後的流程圖：
時鐘 flow
下面是原本的流程圖，可以看到整個方向錯得很離譜哈哈
計時器 flow
知識點
CSS - transition
transition-property：指定要套用轉場動畫的 CSS 屬性，另有 all、none 值，預設值為 alltransition-duration：指定轉場動畫所需經歷的時間，以秒或是毫秒為單位，預設值為 0；可以指定多個時間長度，每個時間長度會被使用在transition-property設定的屬性上transition-timing-function：動畫速度曲線，常見的值可參考 MDNtransition-delay：決定動畫起始的時間，預設是 0 秒，可以是負值或是正值
transition 無法作用的情況
transition 可以計算數值，從舊的到新的變化過程，因此無法運算的值都無法作用，像是從不確定值到確切值，例如 width 設定 auto（不確定值）到 100%，或是 display: none 到 block 等
CSS - transform
transform：可以變形物件，translate、scale、rotate、skew，更多可以參考 MDNtransform-origin：設定元素變化的起始點座標，預設是在元素的左上方，可以寫入百分比、px，或是 left 等方向值
JS - setInterval
固定隔一段時間就執行裡面的內容
setInterval(callback, time);
增進使用體驗
- 目前只是讓時鐘轉動而已，可以嘗試抓取實際時間
不影響功能，但體驗上會更細緻
- 指針目前移動看起來沒有阻力，偏像電子鐘XD
- 指針可以分長短，看起來更符合實際情況
實作
一、透過 JS 取得實際時間
new Date()：回傳時間物件
處理格式
- 自行擷取片段組成字串
都是回傳 Number， 注意 JS 在進行這些操作之前，會先將時間轉成「Local Time」
getFullYear()：取得年份getMonth()：取得月份，注意 0 代表的是 1 月getDate()：取得日期getDay()：取得星期getHours()：取得小時getMinutes()：取得分鐘getSeconds()：取得秒數
let objectDate = new Date();
let year = objectDate.getFullYear();
console.log(year); // 2023
let month = objectDate.getMonth();
console.log(month + 1); // 9
let day = objectDate.getDate();
console.log(day); // 3
- 透過語言來轉換時間的表示法（這次沒有使用到）
以下都是根據「語言」轉換表示法
toLocaleString('Language Code')：轉換「日期 + 時間」的格式toLocaleDateString('Language Code')：轉換「日期」的格式toLocaleTimeString('Language Code')：轉換「時間」的格式
let objectDate = new Date();
console.log(objectDate .toLocaleString('zh-TW'));
//"2023/9/3 下午5:57:11"
console.log(objectDate .toLocaleDateString('zh-TW'));
//"2023/9/3"
console.log(objectDate .toLocaleTimeString('zh-TW'));
//"下午5:57:11"
轉換時區
toUTCString()
let objectDate = new Date();
objectDate.toUTCString(); //轉換成 UTC+0 的時間
二、指針加入動畫速度曲線
設定 transition-timing-function 屬性，讓指針移動看起來更加細緻，因為這部分的速度曲線要自定義，因此會使用到 cubic-bezier 這個函數，可以搭配 cubic-bezier.com 這個網站觀看效果
附上此次的實作成果，今天就介紹到這裡，若有錯誤歡迎指正，也歡迎大家分享自己的看法。
