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