【網頁專案系列

2023年9月3日 — 本次的挑戰是「CSS + JS Clock」，需要達成的目標是：「時鐘的指針會轉動，指針都必須依據現實時鐘的規則前進。」這次需要搭配CSS 動畫，製作時鐘的 ...

2020年3月4日 — –【特定技術】需使用JS 原生語法的getDate() 撈取時間，不可用套件–【特定技術】需使用JS 原生語法的setTimeout() 或setInterval()，持續讓秒針、分針 ...

2019年8月8日 — 建立指針CSS 樣式; 取得指針DOM; 建立控制時鐘函式. 取得現在時間; 控制DOM 樣式. 建立計時器重複執行函式. 基礎語法. JavaScript. Date 物件 · getHours ...

在思考如何將數字刻到時鐘上的時候，我第一個想到的方法是在CSS檔案，以絕對定位的方式將1~12刻到時鐘上。 ... 後來我在網路上找到一段範例程式碼，用非常簡潔的JS語法，實現 ...

2021年6月23日 — 用JavaScript + CSS就能做出簡單時鐘 · setInterval ()：會與setTimeOut來比較，是過去沒有接觸過的語法 · Date()：過去經常接觸，想透過分享更熟悉觀念.

這是單純利用CSS 做出來的時鐘，大量的應用了CSS 裡頭的偽元素( ::before 和::after )，配合簡單的JS 所作出的效果，以下就來介紹是如何做出來的。

2023年9月30日 — 今天我們要來製作一個時鐘。不使用圖片，只使用CSS 來繪製。我的目標是可以做出類似於Apple iOS17 StandBy 的時鐘效果。

2019年9月17日 — CSS部分 · 時鐘的外型 · 每分刻度(白點) · 每小時刻度(橘線) · 橘線上下的數字 · 五分鐘刻度(橘色星星) · 時針、分針 · 秒針 · 如何做出旋轉的樣式呢?

2017年5月17日 — 將每秒取得的時間在 setData 裡面取出，並計算出對應角度再透過 element.style.tranform 來變更CSS效果，產生位移的感覺。 Javascript語法&備註. let & ...