一程序員用javascript做了這個時鐘特效，面試秒過

哈哈，學習javascript的小夥伴，可以跟著我這篇文章的思路一起做一個時鐘特效出來，咋找工作也秒過。代碼都齊全了。

對於web前端的學習有不懂的，或者不知道學習路線，不知道學習方法，不知道該如何紮實能找到工作的朋友，我還是要推薦下我自己建的前端學習群：330242580，首先你要是前端黨，其次不管你是小白還是大牛，我都挺歡迎，小白嘛，主動點多問問題也就學好了，群里每天分享乾貨，包括我自己最近花了一星期整理的一份適合2017年自學的最新web前端資料，送給大家，歡迎初學和進階中的小夥伴。

今天這個時鐘效果圖：

項目分析

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;

為了使頁面能實時的更新，我們要把上面的這些東西封裝為一個函數，然後用定時器每秒執行一次。

整個時鐘的功能都完成了！