整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
款基于HTML5和CSS3的圓盤時鐘動畫，它的特點是圓盤時鐘側邊帶有實時更新的數字時鐘，而且時鐘在走動時還會發出滴答滴答的聲音。
效果圖
JavaScript代碼：
頁面布局：
css樣式：
態時鐘設計實例
之前文章介紹過JavaScript數字時鐘的設計與實現，主要用于借助數組實現對數字時鐘數字進行存儲與標識。在獲取客戶端系統時間之后，選擇對應時鐘數字進行顯示即可。本文主要介紹基于CSS動畫的時鐘設計與實現。
本文設計使用CSS旋轉元素屬性，對時鐘對應指針進行角度旋轉。主要設計內容包括表盤及指針的設計。其中表盤素材如下圖所示：
表盤素材圖片
通過DIV層的嵌套，制作對應的時針、分針、秒針。前端頁面布局結構描述如下圖所示：
前端布局HTML文件源碼
在前端布局中我們使用clock層作為容器用于容納全部時鐘內容。內部分別嵌套hour層用于表示時針、min層用于表示分針，sec層用于表示秒針。通過進一步設置以上class對應的style樣式屬性值，實現頁面的布局。頁面靜態效果展示如下：
帶時針前端頁面靜態效果
在初始時刻所有指針全部重疊，在完成前端設計之后即可使用javascript腳本語言獲取用戶客戶端時間，并從從時間中分別讀取對應的小時、分鐘、秒數，并將其轉化為所需旋轉的角度。使用rotateZ（）方法實現繞Z軸進行轉動。
在定義好轉動角度之后，為實現時鐘動態效果需要進一步使用setInterval定時器方法，設置在指定周期時間內重復獲取客戶端時間，轉化后執行旋轉。最終呈現時鐘效果展示如下：
時鐘動態展示效果
以上給出了設計開發動態時鐘的基本思路及原理，主要包括素材（表盤）的準備，頁面布局，客戶端時間獲取，旋轉方法使用，定時器的使用等。其中頁面布局是實現效果的基礎，本例定理了clock類選擇器用于實現表盤及相關效果的設計，該類選擇器屬性設置描述如下：
clock類選擇器
clock類選擇器定義如上圖所示，其中box-shadow主要完成陰影效果設置，border-radius屬性主要用于實現將div形狀改為圓形。整體布局使用flex進行布局，并設置對其方式為居中。表盤中心白色圓點使用before偽元素進行設置，其樣式定義如下：
表盤中心定義
以clock層為容器，進一步需要定義時針、分針與秒針對應的div相關屬性。其中小時、分鐘指針效果定義樣式描述如下圖：
小時分鐘定義
在小時分鐘指針定義時使用before偽元素進行定義，通過position進行絕對定位，小時、分鐘、秒針使用寬度高度不同，并對指針邊緣使用border-radius進行圓角弧度設置。在相關層定義過程中使用z-index進行層疊順序的設置。
在前端代碼編寫完成之后，就需要使用JavaScript提供的new Date獲取客戶端當前時間，并從其中分離出小時分鐘秒對應的數值及轉化角度。實現代碼如下：
時間轉為旋轉角度
如上圖所示，其中deg為常量，表示表盤最小刻度對應的角度，值為6；在轉換完成之后即可獲取時、分、秒對應的div元素，設置其style樣式，其中獲取元素代碼如下：
獲取時間指針對應元素
最后使用style屬性設置方法完成旋轉角度的設置，代碼描述如下：
使用style設置指針旋轉
在完成以上所有操作之后，可以將以上獲取時間、處理時間及旋轉設置的代碼封裝到一個定時器中，設置執行周期為300毫秒，最終完成案例設計。完整JavaScript代碼部分描述如下：
Js部分完整代碼
本例JavaScript部分完整代碼描述如上圖，如需完整案例代碼請關注并私信作者。
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！
1、美國人。
·2、美國人。
·3、美國人。
·4、美國人。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
