作品網址

思考需求分析

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年台灣男,努力成為優秀的軟體工程師 和 創造多元收入,較常執行於 程式撰寫、網站系統架設規劃 和 商業策略分析規劃,目前在網站開發公司擔任工程師。

發佈留言