[JS作品]JS30系列02：JS + CSS Clock
作品網址 思考需求分析 1.能抓取時間點。 2.區分時針、分針、秒針。 3.時間數值可以轉換成旋轉的角度。 4 […]
作品網址
思考需求分析
1.能抓取時間點。
2.區分時針、分針、秒針。
3.時間數值可以轉換成旋轉的角度。
4.每秒都會重新跑一次時間。
5.秒針會有彈跳的動態感覺。
特別技術、函式
transition-property：定義哪些 CSS properties 會被轉場效果影響。除了這些被你特別指出的 property 名單，其他的轉場一如以往的會在瞬間完成。
transition-duration：定義轉場所花費的時間。你可以只定義一個時間給所有 property 使用，也可以給定多組不同時間。
transition-timing-function：設定轉場時所依據的貝茲曲線。
transition-delay：定義多久之後開始發生轉場。
附註： JavaScript Date 物件只能由以 Date 作為建構子來產生，如果把 Date 作為一般的函數來呼叫（省略掉 new 運算子）將會得到一個字串而非 Date 物件；與其它 JavaScript 物件不同，它並沒有物件實體語法（例如：以中刮號 [ ] 表示陣列的宣告方式）。
Date.getHours()：回傳本地時間的小時（0-23）。
Date.getSeconds()：回傳本地時間的秒數（0-59)。
Date.getMinutes()：回傳本地時間的分鐘數（0-59）。
參考資料
Day2 JS + CSS Clock：https://ithelp.ithome.com.tw/articles/10192498
「JS30紀錄＆心得」02 – JS and CSS Clock：https://guahsu.io/2017/05/JavaScript30-02-JS-and-CSS-Clock/