哈哈钠绍，學(xué)習(xí)javascript的小伙伴，可以跟著我這篇文章的思路一起做一個時鐘特效出來淮椰，咋找工作也秒過五慈。代碼都齊全了。
今天這個時鐘效果圖：
項(xiàng)目分析
1主穗、首先時鐘嘛泻拦，肯定要獲取本地客戶端的時間；
2忽媒、時鐘有 3 個指針争拐，我們可以通過添加動畫的方式讓它們圍繞中心點(diǎn)轉(zhuǎn)動；
3晦雨、通過獲取到的 hour架曹、minute 和 second 值分別計算 時針、分針和秒針的角度值闹瞧；
HTML&CSS
布局
1绑雄、.box是為了布局的方便；
2奥邮、 然后每個指針都需要一個?*-container容器 万牺。
添加 CSS 樣式
把背景加載進(jìn)來罗珍，然后放在頁面中合適的位置上。
1脚粟、?width: 35rem; height: 38rem;這個比例比較順眼吧覆旱；
2、?.box使用 Flex 布局方式核无，并且使其中的?.clock水中扣唱、垂直方向都居中⊥拍希看過第一天教程應(yīng)該都明白 Flex 布局的噪沙。
添加中心軸
使用 CSS3 中的 偽元素 為時鐘添加實(shí)心小圓點(diǎn)，指針都圍著這個點(diǎn)轉(zhuǎn)已慢。
1曲聂、 這句?content: '';是必須的，不然這個偽元素不會顯示佑惠，即使指定了寬度和高度。
2齐疙、 由于相對定位是從元素的左上角開始計算的膜楷，所以?top: 50%; left: 50%;不能使這個小圓點(diǎn)在 Clock 的中心，使用?transform: translate(-50%,-50%);向左上方移動自身寬度或高度的 50%
3贞奋、?z-index: 10;?是為了使這個小圓點(diǎn)在視圖的最上層赌厅，遮擋住指針交叉的地方
指針容器
1、容器被放置在 Clock 的上方轿塔，但是并沒有樣式特愿，接下來就可以創(chuàng)建指針了！
添加指針
1勾缭、分別添加時針揍障、分針和秒針。
2俩由、 使用?%這種單位可以更好地適應(yīng)不同的屏幕毒嫡。
3、transform-origin: 50% 90%;規(guī)定指針旋轉(zhuǎn)的位置為：X 方向的中心線 和 Y 方向的 90% 處這條線的交叉點(diǎn)幻梯。（具體看圖吧）
4兜畸、 這里在定位的時候把自身的寬度計算在內(nèi)了，所以就不必在往左上角移動了碘梢。
動畫
目前為止咬摇，這個 Clock 還是沒有功能的，我們來讓它動起來煞躬。
定義動畫規(guī)則
1肛鹏、這里用?@keyframes?規(guī)則定義了一個動畫逸邦，這個動畫的名稱是?ratate?,應(yīng)用這個動畫的元素會沿著某個 Z 軸（也就是上面規(guī)定好的哪個交叉點(diǎn)）旋轉(zhuǎn) 360 度。
定時功能
規(guī)定每個指針旋轉(zhuǎn) 360 度需要多長時間龄坪。
更像真實(shí)的 Clock
現(xiàn)實(shí)中的 Clock 大部分是秒針和分針都是會跳動的昭雌，并且伴隨著滴答聲，我們來嘗試一下健田。
1烛卧、只需要將 分針 和 秒針的旋轉(zhuǎn)方式調(diào)整為?steps()即可。
但是這樣的 Clock 每次刷新都是從 0 開始的妓局，并不是我們需要的总放，怎么做一個顯示真實(shí)時間的呢？好爬？
正確的時間
我們首先要獲取到當(dāng)前的時間局雄，然后計算每個指針應(yīng)該旋轉(zhuǎn)的角度即可。
獲取每個指針
計算每個指針應(yīng)旋轉(zhuǎn)的角度
在 CSS3 中角度單位一共有四種：
deg(度存炮，一個圓 360 度)炬搭、
grad（梯度，一個圓共400梯度）穆桂、
turn?（轉(zhuǎn)宫盔、圈，一個圓共1圈）享完、
rad（弧度灼芭，一個圓共2π弧度）
它們的對應(yīng)關(guān)系為：
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
很顯然，我們這里要用到的單位是?deg
1般又、+90是因?yàn)榻嵌鹊钠鹗嘉恢脼樗降?X 軸彼绷，為了和 Clock 指針起始位置（Y 軸）做統(tǒng)一；
2茴迁、秒針的計算最簡單寄悯，(second / 60) * 360 + 90;
3、分針要考慮秒針的影響笋熬，如過了30秒热某，相當(dāng)于半分鐘。公式為：?當(dāng)前分鐘數(shù) + 秒數(shù)在分鐘的映射
胳螟；即：(( minutes/ 60) * 360) + ((seconds / 60) * 6) + 90;
4昔馋、時針稍微復(fù)雜一點(diǎn)，因?yàn)橐紤]分鐘的影響糖耸，如過了30分鐘秘遏，相當(dāng)于半小時。公式為：?當(dāng)前時數(shù) + 分鐘在小時的映射嘉竟。即：(( hours/ 12) * 360) + ((minutes / 60) * 30) + 90;
為了使頁面能實(shí)時的更新邦危，我們要把上面的這些東西封裝為一個函數(shù)洋侨，然后用定時器每秒執(zhí)行一次。
整個時鐘的功能都完成了倦蚪！
這個面試案例就算做完了希坚，想要完整代碼自己練習(xí)的小伙伴進(jìn)我的群自助領(lǐng)取，已經(jīng)上傳到群文件里了陵且，群號：594959296裁僧，歡迎學(xué)習(xí)交流的小伙伴過來一起學(xué)習(xí)交流。
