[JS作品]JS30系列02：JS + CSS Clock

作品網址

Demo作品連結
JavaScript 30 作品目錄

思考需求分析

1.能抓取時間點。

2.區分時針、分針、秒針。

3.時間數值可以轉換成旋轉的角度。

4.每秒都會重新跑一次時間。

5.秒針會有彈跳的動態感覺。

特別技術、函式

<HTML>

<CSS>

transition(過渡、轉場)

transition-property：定義哪些 CSS properties 會被轉場效果影響。除了這些被你特別指出的 property 名單，其他的轉場一如以往的會在瞬間完成。

transition-duration：定義轉場所花費的時間。你可以只定義一個時間給所有 property 使用，也可以給定多組不同時間。

transition-timing-function：設定轉場時所依據的貝茲曲線。

transition-delay：定義多久之後開始發生轉場。

<JavaScript>

JavaScript Date 物件

附註： 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/

Steven玄

謝謝您觀看本站內容!! 😅 西元93年台灣男，軟體前、後、資料庫工程師 和 多元收入實踐，程式設計、網站系統規劃、商業策略分析規劃、多元收入研究，目前在網站開發公司擔任工程師。

發佈留言