哈哈稼稿，學(xué)習(xí)javascript的小伙伴，可以跟著我這篇文章的思路一起做一個(gè)時(shí)鐘特效出來(lái)讳窟，咋找工作也秒過(guò)让歼。代碼都齊全了。
這里還是要說(shuō)一下我的前端學(xué)習(xí)群：594959296丽啡，從我一個(gè)到現(xiàn)在的都是看我每一篇文章來(lái)的谋右，可以說(shuō)都是我們大前端的學(xué)霸啊，不定期分享干貨补箍。想學(xué)到東西的都可以來(lái)改执，歡迎初學(xué)和進(jìn)階中的小伙伴
今天這個(gè)時(shí)鐘效果圖：
項(xiàng)目分析
1、首先時(shí)鐘嘛馏予，肯定要獲取本地客戶端的時(shí)間天梧；
2、時(shí)鐘有 3 個(gè)指針霞丧，我們可以通過(guò)添加動(dòng)畫(huà)的方式讓它們圍繞中心點(diǎn)轉(zhuǎn)動(dòng)呢岗；
3、通過(guò)獲取到的 hour蛹尝、minute 和 second 值分別計(jì)算 時(shí)針后豫、分針和秒針的角度值；
HTML&CSS
布局
1突那、.box是為了布局的方便挫酿；
2、 然后每個(gè)指針都需要一個(gè)*-container容器 愕难。
添加 CSS 樣式
把背景加載進(jìn)來(lái)早龟，然后放在頁(yè)面中合適的位置上。
1猫缭、width: 35rem; height: 38rem;這個(gè)比例比較順眼吧葱弟；
2、.box使用 Flex 布局方式猜丹，并且使其中的.clock水中芝加、垂直方向都居中∩渲希看過(guò)第一天教程應(yīng)該都明白 Flex 布局的藏杖。
添加中心軸
使用 CSS3 中的 偽元素 為時(shí)鐘添加實(shí)心小圓點(diǎn)将塑，指針都圍著這個(gè)點(diǎn)轉(zhuǎn)。
1蝌麸、 這句content: '';是必須的点寥，不然這個(gè)偽元素不會(huì)顯示，即使指定了寬度和高度祥楣。
2开财、 由于相對(duì)定位是從元素的左上角開(kāi)始計(jì)算的，所以top: 50%; left: 50%;不能使這個(gè)小圓點(diǎn)在 Clock 的中心误褪，使用transform: translate(-50%,-50%);向左上方移動(dòng)自身寬度或高度的 50%
3、z-index: 10;是為了使這個(gè)小圓點(diǎn)在視圖的最上層碾褂，遮擋住指針交叉的地方
指針容器
1兽间、容器被放置在 Clock 的上方，但是并沒(méi)有樣式正塌，接下來(lái)就可以創(chuàng)建指針了嘀略！
添加指針
1、分別添加時(shí)針乓诽、分針和秒針帜羊。
2、 使用%這種單位可以更好地適應(yīng)不同的屏幕鸠天。
3讼育、transform-origin: 50% 90%;規(guī)定指針旋轉(zhuǎn)的位置為：X 方向的中心線 和 Y 方向的 90% 處這條線的交叉點(diǎn)。（具體看圖吧）
4稠集、 這里在定位的時(shí)候把自身的寬度計(jì)算在內(nèi)了奶段，所以就不必在往左上角移動(dòng)了。
動(dòng)畫(huà)
目前為止剥纷，這個(gè) Clock 還是沒(méi)有功能的痹籍，我們來(lái)讓它動(dòng)起來(lái)。
定義動(dòng)畫(huà)規(guī)則
1晦鞋、這里用@keyframes規(guī)則定義了一個(gè)動(dòng)畫(huà)蹲缠，這個(gè)動(dòng)畫(huà)的名稱是ratate,應(yīng)用這個(gè)動(dòng)畫(huà)的元素會(huì)沿著某個(gè) Z 軸（也就是上面規(guī)定好的哪個(gè)交叉點(diǎn)）旋轉(zhuǎn) 360 度。
定時(shí)功能
規(guī)定每個(gè)指針旋轉(zhuǎn) 360 度需要多長(zhǎng)時(shí)間悠垛。
更像真實(shí)的 Clock
現(xiàn)實(shí)中的 Clock 大部分是秒針和分針都是會(huì)跳動(dòng)的线定，并且伴隨著滴答聲，我們來(lái)嘗試一下鼎文。
1渔肩、只需要將 分針 和 秒針的旋轉(zhuǎn)方式調(diào)整為steps()即可。
但是這樣的 Clock 每次刷新都是從 0 開(kāi)始的拇惋，并不是我們需要的周偎，怎么做一個(gè)顯示真實(shí)時(shí)間的呢抹剩？？
正確的時(shí)間
我們首先要獲取到當(dāng)前的時(shí)間蓉坎，然后計(jì)算每個(gè)指針應(yīng)該旋轉(zhuǎn)的角度即可澳眷。
獲取每個(gè)指針
計(jì)算每個(gè)指針應(yīng)旋轉(zhuǎn)的角度
在 CSS3 中角度單位一共有四種：
deg(度，一個(gè)圓 360 度)蛉艾、
grad（梯度钳踊，一個(gè)圓共400梯度）、
turn（轉(zhuǎn)勿侯、圈拓瞪，一個(gè)圓共1圈）、
rad（弧度助琐，一個(gè)圓共2π弧度）
它們的對(duì)應(yīng)關(guān)系為：
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
很顯然祭埂，我們這里要用到的單位是deg
1、+90是因?yàn)榻嵌鹊钠鹗嘉恢脼樗降?X 軸兵钮，為了和 Clock 指針起始位置（Y 軸）做統(tǒng)一蛆橡；
2、秒針的計(jì)算最簡(jiǎn)單掘譬，(second / 60) * 360 + 90;
3泰演、分針要考慮秒針的影響，如過(guò)了30秒葱轩，相當(dāng)于半分鐘睦焕。公式為：當(dāng)前分鐘數(shù) + 秒數(shù)在分鐘的映射
；即：(( minutes/ 60) * 360) + ((seconds / 60) * 6) + 90;
4酿箭、時(shí)針稍微復(fù)雜一點(diǎn)复亏，因?yàn)橐紤]分鐘的影響，如過(guò)了30分鐘缭嫡，相當(dāng)于半小時(shí)缔御。公式為：當(dāng)前時(shí)數(shù) + 分鐘在小時(shí)的映射。即：(( hours/ 12) * 360) + ((minutes / 60) * 30) + 90;
為了使頁(yè)面能實(shí)時(shí)的更新妇蛀，我們要把上面的這些東西封裝為一個(gè)函數(shù)耕突，然后用定時(shí)器每秒執(zhí)行一次。
整個(gè)時(shí)鐘的功能都完成了评架！
這個(gè)面試案例就算做完了眷茁，想要完整代碼自己練習(xí)的小伙伴進(jìn)我的群自助領(lǐng)取，已經(jīng)上傳到群文件里了纵诞，群號(hào)：621071874上祈，歡迎學(xué)習(xí)交流的小伙伴過(guò)來(lái)一起學(xué)習(xí)交流。
