挑戰 JS30 #2 - CSS + JS Clock

本次的挑戰是「CSS + JS Clock」，需要達成的目標是：

「時鐘的指針會轉動，指針都必須依據現實時鐘的規則前進。」

這次需要搭配 CSS 動畫，製作時鐘的指針旋轉效果。此次挑戰涉及以下內容：

• 指針旋轉動畫
• 現實時鐘的邏輯
• 取得現實時間
• 隔一段時間更新畫面

嘗試拆解流程

發現自己一開始的思維太專注在現實時鐘的規則，導致比較像在做計時器，不是時鐘XD

這是修改後的流程圖：

時鐘 flow

下面是原本的流程圖，可以看到整個方向錯得很離譜哈哈

計時器 flow

知識點

CSS - transition

• transition-property：指定要套用轉場動畫的 CSS 屬性，另有 all、none 值，預設值為 all
• transition-duration：指定轉場動畫所需經歷的時間，以秒或是毫秒為單位，預設值為 0；可以指定多個時間長度，每個時間長度會被使用在transition-property設定的屬性上
• transition-timing-function：動畫速度曲線，常見的值可參考 MDN
• transition-delay：決定動畫起始的時間，預設是 0 秒，可以是負值或是正值

transition 無法作用的情況

transition 可以計算數值，從舊的到新的變化過程，因此無法運算的值都無法作用，像是從不確定值到確切值，例如 width 設定 auto（不確定值）到 100%，或是 display: none 到 block 等

CSS - transform

• transform：可以變形物件，translate、scale、rotate、skew，更多可以參考 MDN
• transform-origin：設定元素變化的起始點座標，預設是在元素的左上方，可以寫入百分比、px，或是 left 等方向值

JS - setInterval

固定隔一段時間就執行裡面的內容

setInterval(callback, time);​

增進使用體驗

• 目前只是讓時鐘轉動而已，可以嘗試抓取實際時間

不影響功能，但體驗上會更細緻

• 指針目前移動看起來沒有阻力，偏像電子鐘XD
• 指針可以分長短，看起來更符合實際情況

實作

一、透過 JS 取得實際時間

• new Date()：回傳時間物件

處理格式

1. 自行擷取片段組成字串

都是回傳 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

2. 透過語言來轉換時間的表示法（這次沒有使用到）

以下都是根據「語言」轉換表示法

• 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 這個網站觀看效果

附上此次的實作成果，今天就介紹到這裡，若有錯誤歡迎指正，也歡迎大家分享自己的看法。

參考資料

• MDN - transition
• 前端新手村 Transition
• JavaScript Date：計算不同時區的時間
• 淺談 JavaScript 中的時間與時區處理
• [JS] Date Time Method 日期時間