實(shí)現(xiàn)效果

一個(gè)轉(zhuǎn)動(dòng)的表盤(pán)

技術(shù)分析

• 時(shí)間（new Date() 獲取當(dāng)前時(shí)間）

• 指針位置（js計(jì)算指針的角度）

• 指針旋轉(zhuǎn)（每過(guò)一秒計(jì)算一次角度）

• 改變角度（transfrom: rotate()）

實(shí)現(xiàn)步驟

1. 獲取當(dāng)前時(shí)間

? 先獲取對(duì)應(yīng)的元素（三支指針）

? 獲取當(dāng)前時(shí)間的時(shí)分秒

2. 計(jì)算指針對(duì)應(yīng)角度

? 指針的計(jì)算有多種思路，下面給出兩種計(jì)算方式

1. 根據(jù)表盤(pán)有360度，秒針轉(zhuǎn)一圈需要1分鐘（60s），分針轉(zhuǎn)一圈需要1小時(shí) (60min)，時(shí)針轉(zhuǎn)一圈需要12小時(shí)(12h)，我們可以分別計(jì)算指針在表盤(pán)上的占比然后乘以360

????????? 秒針 (seconds / 60)*360

????????? 分針 (mins / 60)*360 + (seconds / 60 / 60)*360

????????? 時(shí)針 (hour / 12)*360 + (mins / 60 / 12)*360 + (seconds / 60 / 60 / 12)*360

2. 根據(jù)每秒、每分、每時(shí)旋轉(zhuǎn)的度數(shù)來(lái)計(jì)算在表盤(pán)上的位置，該方法計(jì)算了毫秒顯示會(huì)更精準(zhǔn)一點(diǎn)

????????? 一秒鐘--->6度

????????? 一分鐘--->6度

????????? 一小時(shí)--->30度

3. 改變表盤(pán)樣式

? 修改對(duì)應(yīng)指針的旋轉(zhuǎn)角度，這里用 rotate 來(lái)修改，但此時(shí)顯示效果不盡人意，我們還需要修改旋轉(zhuǎn)起始點(diǎn)的位置

? 將 transfrom-origin 改為 right 就可以正常顯示了

4. 實(shí)現(xiàn)轉(zhuǎn)動(dòng)效果

? 這里我們可以使用定時(shí)器來(lái)實(shí)現(xiàn)轉(zhuǎn)動(dòng)效果，之前的代碼封裝放入定時(shí)器，然后將將定時(shí)器設(shè)置為1秒就可以實(shí)現(xiàn)我們想要的效果了，由于開(kāi)始的時(shí)候指針都是負(fù)90度，所以我們?cè)僭谒械慕嵌壬霞由?0

完整代碼

外觀美化

? 你可能覺(jué)得原有的項(xiàng)目樣式不好看，你也可以自己修改成你喜歡的樣式，這里我給出我自己的修改樣式

????? 修改指針的長(zhǎng)短

????? 改變指針顏色、增加陰影

????? 修改背景圖片、添加過(guò)渡動(dòng)畫(huà)等...

背景模糊

? 背景元素除了使用 filter: blur() + 偽元素 ，還可以使用backdrop-filter