整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
哈，學習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，歡迎學習交流的小伙伴過來一起學習交流。
段時間發的五子棋的游戲很多小伙伴都私聊讓再做個，今天小猿圈web前端講師為大家分享的是CSS3動畫練習案例：用CSS3做個鐘表，想玩的小伙伴記得自己運行一下呦。
自學CSS3屬性之后，我們來用一個小案例進行一個綜合練習，這個案例主要是動畫的應用，我們就用純css動畫做一個能走字的鐘表。
首先我們來準備HTML來布局一下：
<body>
<div class="clock">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
<div class="line6"></div>
<div class="cent"></div>
<div class="cover"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="seconds"></div>
</div>
</body>
布局很簡單，六根直線通過旋轉一定角度做刻度一個中間小圓點，一個遮罩來蓋住六根直線的中間部分，使直線變成刻度，后面三個是時分秒針。
下面通過CSS把鐘表的大概樣子設置出來。
.clock {
/* 創建圓形盒子當做表盤 */
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
border: 10px solid #000;
border-radius: 50%;
}
.clock div:nth-child(-n+6) {
/* 選中前6個子元素做出6條線當做表的刻度 */
width: 6px;
height: 200px;
background-color: #aaa;
position: absolute;
left: 50%;
margin-left:-3px;
}
/* 讓6條線遞增旋轉30度 */
.clock div:nth-child(1) {
transform: rotate(30deg);
}
.clock div:nth-child(2) {
transform: rotate(60deg);
}
.clock div:nth-child(3) {
transform: rotate(90deg);
background-color: #333;
}
.clock div:nth-child(4) {
transform: rotate(120deg);
}
.clock div:nth-child(5) {
transform: rotate(150deg);
}
.clock div:nth-child(6) {
transform: rotate(0deg);
background-color: #333;
}
/* 中心小圓點 */
.cent {
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
position:absolute;
z-index: 3;
left: 50%;
top:50%;
margin: -10px 0 0 -10px;
z-index:2;
}
/* 遮住線的中間部分，讓線成為刻度 */
.cover {
width: 180px;
height: 180px;
border-radius: 50%;
background-color: #fff;
position:absolute;
left: 50%;
top:50%;
margin:-90px 0 0 -90px;
}
后面加上中心圓點和遮罩，讓它看起來像個表盤。
接下來我們就可以準備表針和動畫了。
/* 時針制作 */
.hour {
width: 6px;
height: 50px;
background-color: #000;
position:absolute;
left: 50%;
top:100px;
margin-left: -3px;
animation: clockrotate 43200s steps(43200) infinite linear;
transform-origin: top center;
}
/* 分針制作 */
.minute {
width: 60px;
height: 6px;
background-color: #555;
position:absolute;
left:40px;
top:50%;
margin-top: -3px;
animation: clockrotate 3600s steps(3600) infinite;
transform-origin: center right;
}
/* 秒針制作 */
.seconds {
width: 4px;
height: 70px;
background-color:red;
position: absolute;
left:50%;
top:30px;
margin-left: -2px;
animation: clockrotate 60s steps(60) infinite ;
transform-origin: bottom center;
}
/* 設置動畫序列 */
@keyframes clockrotate {
form{
}
to {
transform: rotate(360deg);
}
}
設置每個針的動畫是旋轉360度，根據時、分、秒來計算動畫執行完畢需要的時間和步數，加個infinite無限執行，另外還要注意表針旋轉的中心點設置。
上述就是小猿圈老師針對CSS3動畫練習案例：用CSS3做個鐘表介紹，相信你對web前端也是有一定的了解的，如果遇到不會的問題可以到小猿圈去尋找答案的，里面有最新最全面的視頻教程等你來學習，只要你想學習編程這里都有。
碼運行結果
寫在前面，覺得效果還可以的朋，可以點一下關注，點關注，不迷路
本文主要參考[canvas入門](https://www.runoob.com/html/html5-canvas.html)網址，加上自己理解將鐘表圖用原生js寫出來，有兩個難點
1.整個時鐘的實現的難點和重點是save（）和restore（）的進棧 出棧，后進先出，理解的有點難，參考上面的網址很好理解，最后需要讓第一個進棧的出棧
2， requestAnimFrame()這個函數，功能強大，類似于定時器，但其兼容性不好，之前沒了解好，直接拿來用，結果導致了錯誤，具體優點可以參考這篇文章[更好的理解requestAnimFrame()](https://blog.csdn.net/whqet/article/details/42911059)
下面是全部代碼，粘貼，在谷歌瀏覽器可以完美運行。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
