一程序員用javascript做了這個時鐘特效，面試秒過
哈哈，學習javascript的小夥伴，可以跟著我這篇文章的思路一起做一個時鐘特效出來，咋找工作也秒過。代碼都齊全了。
這裡還是要說一下我的前端學習群：594959296，從我一個到現在的都是看我每一篇文章來的，可以說都是我們大前端的學霸啊，不定期分享乾貨。想學到東西的都可以來，歡迎初學和進階中的小夥伴
今天這個時鐘效果圖：
項目分析
1、首先時鐘嘛，肯定要獲取本地客戶端的時間；
2、時鐘有 3 個指針，我們可以通過添加動畫的方式讓它們圍繞中心點轉動；
3、通過獲取到的 hour、minute 和 second 值分別計算 時針、分針和秒針的角度值；
HTML&CSS
佈局
1、.box是為了佈局的方便；
2、 然後每個指針都需要一個 *-container容器 。
添加 CSS 樣式
把背景加載進來，然後放在頁面中合適的位置上。
1、 width: 35rem; height: 38rem;這個比例比較順眼吧；
2、 .box使用 Flex 佈局方式，並且使其中的 .clock水中、垂直方向都居中。看過第一天教程應該都明白 Flex 佈局的。
添加中心軸
使用 CSS3 中的 偽元素 為時鐘添加實心小圓點，指針都圍著這個點轉。
1、 這句 content: '';是必須的，不然這個偽元素不會顯示，即使指定了寬度和高度。
2、 由於相對定位是從元素的左上角開始計算的，所以 top: 50%; left: 50%;不能使這個小圓點在 Clock 的中心，使用 transform: translate(-50%,-50%);向左上方移動自身寬度或高度的 50%
3、 z-index: 10; 是為了使這個小圓點在視圖的最上層，遮擋住指針交叉的地方
指針容器
1、容器被放置在 Clock 的上方，但是並沒有樣式，接下來就可以創建指針了！
添加指針
1、分別添加時針、分針和秒針。
2、 使用 %這種單位可以更好地適應不同的屏幕。
3、transform-origin: 50% 90%;規定指針旋轉的位置為：X 方向的中心線 和 Y 方向的 90% 處這條線的交叉點。（具體看圖吧）
4、 這裡在定位的時候把自身的寬度計算在內了，所以就不必在往左上角移動了。
動畫
目前為止，這個 Clock 還是沒有功能的，我們來讓它動起來。
定義動畫規則
1、這裡用 @keyframes 規則定義了一個動畫，這個動畫的名稱是 ratate ,應用這個動畫的元素會沿著某個 Z 軸（也就是上面規定好的哪個交叉點）旋轉 360 度。
定時功能
規定每個指針旋轉 360 度需要多長時間。
更像真實的 Clock
現實中的 Clock 大部分是秒針和分針都是會跳動的，並且伴隨著滴答聲，我們來嘗試一下。
1、只需要將 分針 和 秒針的旋轉方式調整為 steps()即可。
但是這樣的 Clock 每次刷新都是從 0 開始的，並不是我們需要的，怎麼做一個顯示真實時間的呢？？
正確的時間
我們首先要獲取到當前的時間，然後計算每個指針應該旋轉的角度即可。
獲取每個指針
計算每個指針應旋轉的角度
在 CSS3 中角度單位一共有四種：
deg(度，一個圓 360 度)、
grad（梯度，一個圓共400梯度）、
turn （轉、圈，一個圓共1圈）、
rad（弧度，一個圓共2π弧度）
它們的對應關係為：
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
很顯然，我們這裡要用到的單位是 deg
1、+90是因為角度的起始位置為水平的 X 軸，為了和 Clock 指針起始位置（Y 軸）做統一；
2、秒針的計算最簡單，(second / 60) * 360 + 90;
3、分針要考慮秒針的影響，如過了30秒，相當於半分鐘。公式為： 當前分鐘數 + 秒數在分鐘的映射
；即：(( minutes/ 60) * 360) + ((seconds / 60) * 6) + 90;
4、時針稍微複雜一點，因為要考慮分鐘的影響，如過了30分鐘，相當於半小時。公式為： 當前時數 + 分鐘在小時的映射。即：(( hours/ 12) * 360) + ((minutes / 60) * 30) + 90;
為了使頁面能實時的更新，我們要把上面的這些東西封裝為一個函數，然後用定時器每秒執行一次。
整個時鐘的功能都完成了！
這個面試案例就算做完了，想要完整代碼自己練習的小夥伴進我的群自助領取，已經上傳到群文件裡了，群號：594959296，歡迎學習交流的小夥伴過來一起學習交流。