整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
哈，學(xué)習(xí)javascript的小伙伴，可以跟著我這篇文章的思路一起做一個(gè)時(shí)鐘特效出來，咋找工作也秒過。代碼都齊全了。
這里還是要說一下我的前端學(xué)習(xí)群：594959296，從我一個(gè)到現(xiàn)在的都是看我每一篇文章來的，可以說都是我們大前端的學(xué)霸啊，不定期分享干貨。想學(xué)到東西的都可以來，歡迎初學(xué)和進(jìn)階中的小伙伴
今天這個(gè)時(shí)鐘效果圖：
項(xiàng)目分析
1、首先時(shí)鐘嘛，肯定要獲取本地客戶端的時(shí)間；
2、時(shí)鐘有 3 個(gè)指針，我們可以通過添加動(dòng)畫的方式讓它們圍繞中心點(diǎn)轉(zhuǎn)動(dòng)；
3、通過獲取到的 hour、minute 和 second 值分別計(jì)算 時(shí)針、分針和秒針的角度值；
HTML&CSS
布局
1、.box是為了布局的方便；
2、 然后每個(gè)指針都需要一個(gè) *-container容器 。
添加 CSS 樣式
把背景加載進(jìn)來，然后放在頁面中合適的位置上。
1、 width: 35rem; height: 38rem;這個(gè)比例比較順眼吧；
2、 .box使用 Flex 布局方式，并且使其中的 .clock水中、垂直方向都居中。看過第一天教程應(yīng)該都明白 Flex 布局的。
添加中心軸
使用 CSS3 中的 偽元素 為時(shí)鐘添加實(shí)心小圓點(diǎn)，指針都圍著這個(gè)點(diǎn)轉(zhuǎn)。
1、 這句 content: '';是必須的，不然這個(gè)偽元素不會(huì)顯示，即使指定了寬度和高度。
2、 由于相對(duì)定位是從元素的左上角開始計(jì)算的，所以 top: 50%; left: 50%;不能使這個(gè)小圓點(diǎn)在 Clock 的中心，使用 transform: translate(-50%,-50%);向左上方移動(dòng)自身寬度或高度的 50%
3、 z-index: 10; 是為了使這個(gè)小圓點(diǎn)在視圖的最上層，遮擋住指針交叉的地方
指針容器
1、容器被放置在 Clock 的上方，但是并沒有樣式，接下來就可以創(chuàng)建指針了！
添加指針
1、分別添加時(shí)針、分針和秒針。
2、 使用 %這種單位可以更好地適應(yīng)不同的屏幕。
3、transform-origin: 50% 90%;規(guī)定指針旋轉(zhuǎn)的位置為：X 方向的中心線 和 Y 方向的 90% 處這條線的交叉點(diǎn)。（具體看圖吧）
4、 這里在定位的時(shí)候把自身的寬度計(jì)算在內(nèi)了，所以就不必在往左上角移動(dòng)了。
動(dòng)畫
目前為止，這個(gè) Clock 還是沒有功能的，我們來讓它動(dòng)起來。
定義動(dòng)畫規(guī)則
1、這里用 @keyframes 規(guī)則定義了一個(gè)動(dòng)畫，這個(gè)動(dòng)畫的名稱是 ratate ,應(yīng)用這個(gè)動(dòng)畫的元素會(huì)沿著某個(gè) Z 軸（也就是上面規(guī)定好的哪個(gè)交叉點(diǎn)）旋轉(zhuǎn) 360 度。
定時(shí)功能
規(guī)定每個(gè)指針旋轉(zhuǎn) 360 度需要多長時(shí)間。
更像真實(shí)的 Clock
現(xiàn)實(shí)中的 Clock 大部分是秒針和分針都是會(huì)跳動(dòng)的，并且伴隨著滴答聲，我們來嘗試一下。
1、只需要將 分針 和 秒針的旋轉(zhuǎn)方式調(diào)整為 steps()即可。
但是這樣的 Clock 每次刷新都是從 0 開始的，并不是我們需要的，怎么做一個(gè)顯示真實(shí)時(shí)間的呢？？
正確的時(shí)間
我們首先要獲取到當(dāng)前的時(shí)間，然后計(jì)算每個(gè)指針應(yīng)該旋轉(zhuǎn)的角度即可。
獲取每個(gè)指針
計(jì)算每個(gè)指針應(yīng)旋轉(zhuǎn)的角度
在 CSS3 中角度單位一共有四種：
deg(度，一個(gè)圓 360 度)、
grad（梯度，一個(gè)圓共400梯度）、
turn （轉(zhuǎn)、圈，一個(gè)圓共1圈）、
rad（弧度，一個(gè)圓共2π弧度）
它們的對(duì)應(yīng)關(guān)系為：
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
很顯然，我們這里要用到的單位是 deg
1、+90是因?yàn)榻嵌鹊钠鹗嘉恢脼樗降?X 軸，為了和 Clock 指針起始位置（Y 軸）做統(tǒng)一；
2、秒針的計(jì)算最簡單，(second / 60) * 360 + 90;
3、分針要考慮秒針的影響，如過了30秒，相當(dāng)于半分鐘。公式為： 當(dāng)前分鐘數(shù) + 秒數(shù)在分鐘的映射
；即：(( minutes/ 60) * 360) + ((seconds / 60) * 6) + 90;
4、時(shí)針稍微復(fù)雜一點(diǎn)，因?yàn)橐紤]分鐘的影響，如過了30分鐘，相當(dāng)于半小時(shí)。公式為： 當(dāng)前時(shí)數(shù) + 分鐘在小時(shí)的映射。即：(( hours/ 12) * 360) + ((minutes / 60) * 30) + 90;
為了使頁面能實(shí)時(shí)的更新，我們要把上面的這些東西封裝為一個(gè)函數(shù)，然后用定時(shí)器每秒執(zhí)行一次。
整個(gè)時(shí)鐘的功能都完成了！
這個(gè)面試案例就算做完了，想要完整代碼自己練習(xí)的小伙伴進(jìn)我的群自助領(lǐng)取，已經(jīng)上傳到群文件里了，群號(hào)：594959296，歡迎學(xué)習(xí)交流的小伙伴過來一起學(xué)習(xí)交流。
段時(shí)間發(fā)的五子棋的游戲很多小伙伴都私聊讓再做個(gè)，今天小猿圈web前端講師為大家分享的是CSS3動(dòng)畫練習(xí)案例：用CSS3做個(gè)鐘表，想玩的小伙伴記得自己運(yùn)行一下呦。
自學(xué)CSS3屬性之后，我們來用一個(gè)小案例進(jìn)行一個(gè)綜合練習(xí)，這個(gè)案例主要是動(dòng)畫的應(yīng)用，我們就用純css動(dòng)畫做一個(gè)能走字的鐘表。
首先我們來準(zhǔn)備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>
布局很簡單，六根直線通過旋轉(zhuǎn)一定角度做刻度一個(gè)中間小圓點(diǎn)，一個(gè)遮罩來蓋住六根直線的中間部分，使直線變成刻度，后面三個(gè)是時(shí)分秒針。
下面通過CSS把鐘表的大概樣子設(shè)置出來。
.clock {
/* 創(chuàng)建圓形盒子當(dāng)做表盤 */
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
border: 10px solid #000;
border-radius: 50%;
}
.clock div:nth-child(-n+6) {
/* 選中前6個(gè)子元素做出6條線當(dāng)做表的刻度 */
width: 6px;
height: 200px;
background-color: #aaa;
position: absolute;
left: 50%;
margin-left:-3px;
}
/* 讓6條線遞增旋轉(zhuǎn)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;
}
/* 中心小圓點(diǎn) */
.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;
}
后面加上中心圓點(diǎn)和遮罩，讓它看起來像個(gè)表盤。
接下來我們就可以準(zhǔn)備表針和動(dòng)畫了。
/* 時(shí)針制作 */
.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;
}
/* 設(shè)置動(dòng)畫序列 */
@keyframes clockrotate {
form{
}
to {
transform: rotate(360deg);
}
}
設(shè)置每個(gè)針的動(dòng)畫是旋轉(zhuǎn)360度，根據(jù)時(shí)、分、秒來計(jì)算動(dòng)畫執(zhí)行完畢需要的時(shí)間和步數(shù)，加個(gè)infinite無限執(zhí)行，另外還要注意表針旋轉(zhuǎn)的中心點(diǎn)設(shè)置。
上述就是小猿圈老師針對(duì)CSS3動(dòng)畫練習(xí)案例：用CSS3做個(gè)鐘表介紹，相信你對(duì)web前端也是有一定的了解的，如果遇到不會(huì)的問題可以到小猿圈去尋找答案的，里面有最新最全面的視頻教程等你來學(xué)習(xí)，只要你想學(xué)習(xí)編程這里都有。
碼運(yùn)行結(jié)果
寫在前面，覺得效果還可以的朋，可以點(diǎn)一下關(guān)注，點(diǎn)關(guān)注，不迷路
本文主要參考[canvas入門](https://www.runoob.com/html/html5-canvas.html)網(wǎng)址，加上自己理解將鐘表圖用原生js寫出來，有兩個(gè)難點(diǎn)
1.整個(gè)時(shí)鐘的實(shí)現(xiàn)的難點(diǎn)和重點(diǎn)是save（）和restore（）的進(jìn)棧 出棧，后進(jìn)先出，理解的有點(diǎn)難，參考上面的網(wǎng)址很好理解，最后需要讓第一個(gè)進(jìn)棧的出棧
2， requestAnimFrame()這個(gè)函數(shù)，功能強(qiáng)大，類似于定時(shí)器，但其兼容性不好，之前沒了解好，直接拿來用，結(jié)果導(dǎo)致了錯(cuò)誤，具體優(yōu)點(diǎn)可以參考這篇文章[更好的理解requestAnimFrame()](https://blog.csdn.net/whqet/article/details/42911059)
下面是全部代碼，粘貼，在谷歌瀏覽器可以完美運(yùn)行。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
