Zi 字媒體

哈哈，學習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很顯然，我們這裡要用到的單位是 deg1、+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;為了使頁面能實時的更新，我們要把上面的這些東西封裝為一個函數，然後用定時器每秒執行一次。整個時鐘的功能都完成了！