之前文章介紹過(guò)JavaScript數(shù)字時(shí)鐘的設(shè)計(jì)與實(shí)現(xiàn)，主要用于借助數(shù)組實(shí)現(xiàn)對(duì)數(shù)字時(shí)鐘數(shù)字進(jìn)行存儲(chǔ)與標(biāo)識(shí)。在獲取客戶端系統(tǒng)時(shí)間之后，選擇對(duì)應(yīng)時(shí)鐘數(shù)字進(jìn)行顯示即可。本文主要介紹基于CSS動(dòng)畫(huà)的時(shí)鐘設(shè)計(jì)與實(shí)現(xiàn)。

實(shí)現(xiàn)思路與原理

本文設(shè)計(jì)使用CSS旋轉(zhuǎn)元素屬性，對(duì)時(shí)鐘對(duì)應(yīng)指針進(jìn)行角度旋轉(zhuǎn)。主要設(shè)計(jì)內(nèi)容包括表盤(pán)及指針的設(shè)計(jì)。其中表盤(pán)素材如下圖所示：

通過(guò)DIV層的嵌套，制作對(duì)應(yīng)的時(shí)針、分針、秒針。前端頁(yè)面布局結(jié)構(gòu)描述如下圖所示：

在前端布局中我們使用clock層作為容器用于容納全部時(shí)鐘內(nèi)容。內(nèi)部分別嵌套hour層用于表示時(shí)針、min層用于表示分針，sec層用于表示秒針。通過(guò)進(jìn)一步設(shè)置以上class對(duì)應(yīng)的style樣式屬性值，實(shí)現(xiàn)頁(yè)面的布局。頁(yè)面靜態(tài)效果展示如下：

在初始時(shí)刻所有指針全部重疊，在完成前端設(shè)計(jì)之后即可使用javascript腳本語(yǔ)言獲取用戶客戶端時(shí)間，并從從時(shí)間中分別讀取對(duì)應(yīng)的小時(shí)、分鐘、秒數(shù)，并將其轉(zhuǎn)化為所需旋轉(zhuǎn)的角度。使用rotateZ（）方法實(shí)現(xiàn)繞Z軸進(jìn)行轉(zhuǎn)動(dòng)。

在定義好轉(zhuǎn)動(dòng)角度之后，為實(shí)現(xiàn)時(shí)鐘動(dòng)態(tài)效果需要進(jìn)一步使用setInterval定時(shí)器方法，設(shè)置在指定周期時(shí)間內(nèi)重復(fù)獲取客戶端時(shí)間，轉(zhuǎn)化后執(zhí)行旋轉(zhuǎn)。最終呈現(xiàn)時(shí)鐘效果展示如下：

核心代碼分析與說(shuō)明

以上給出了設(shè)計(jì)開(kāi)發(fā)動(dòng)態(tài)時(shí)鐘的基本思路及原理，主要包括素材（表盤(pán)）的準(zhǔn)備，頁(yè)面布局，客戶端時(shí)間獲取，旋轉(zhuǎn)方法使用，定時(shí)器的使用等。其中頁(yè)面布局是實(shí)現(xiàn)效果的基礎(chǔ)，本例定理了clock類選擇器用于實(shí)現(xiàn)表盤(pán)及相關(guān)效果的設(shè)計(jì)，該類選擇器屬性設(shè)置描述如下：

clock類選擇器定義如上圖所示，其中box-shadow主要完成陰影效果設(shè)置，border-radius屬性主要用于實(shí)現(xiàn)將div形狀改為圓形。整體布局使用flex進(jìn)行布局，并設(shè)置對(duì)其方式為居中。表盤(pán)中心白色圓點(diǎn)使用before偽元素進(jìn)行設(shè)置，其樣式定義如下：

以clock層為容器，進(jìn)一步需要定義時(shí)針、分針與秒針對(duì)應(yīng)的div相關(guān)屬性。其中小時(shí)、分鐘指針效果定義樣式描述如下圖：

在小時(shí)分鐘指針定義時(shí)使用before偽元素進(jìn)行定義，通過(guò)position進(jìn)行絕對(duì)定位，小時(shí)、分鐘、秒針使用寬度高度不同，并對(duì)指針邊緣使用border-radius進(jìn)行圓角弧度設(shè)置。在相關(guān)層定義過(guò)程中使用z-index進(jìn)行層疊順序的設(shè)置。

在前端代碼編寫(xiě)完成之后，就需要使用JavaScript提供的new Date獲取客戶端當(dāng)前時(shí)間，并從其中分離出小時(shí)分鐘秒對(duì)應(yīng)的數(shù)值及轉(zhuǎn)化角度。實(shí)現(xiàn)代碼如下：

如上圖所示，其中deg為常量，表示表盤(pán)最小刻度對(duì)應(yīng)的角度，值為6；在轉(zhuǎn)換完成之后即可獲取時(shí)、分、秒對(duì)應(yīng)的div元素，設(shè)置其style樣式，其中獲取元素代碼如下：

最后使用style屬性設(shè)置方法完成旋轉(zhuǎn)角度的設(shè)置，代碼描述如下：

在完成以上所有操作之后，可以將以上獲取時(shí)間、處理時(shí)間及旋轉(zhuǎn)設(shè)置的代碼封裝到一個(gè)定時(shí)器中，設(shè)置執(zhí)行周期為300毫秒，最終完成案例設(shè)計(jì)。完整JavaScript代碼部分描述如下：

本例JavaScript部分完整代碼描述如上圖，如需完整案例代碼請(qǐng)關(guān)注并私信作者。

本頭條號(hào)長(zhǎng)期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對(duì)以上方面有興趣或代碼錯(cuò)誤、建議與意見(jiàn)，可在評(píng)論區(qū)回復(fù)。更多程序設(shè)計(jì)相關(guān)教程及實(shí)例分享，期待大家關(guān)注與閱讀！

1、美國(guó)人。

·2、美國(guó)人。

·3、美國(guó)人。

·4、美國(guó)人。