您好,登錄后才能下訂單哦!
來模仿一個(gè) ISO 上的時(shí)鐘:ISO Clock
實(shí)現(xiàn)效果:
ISO Clock
項(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
布局
<div class="box"> <article class="clock"> <div class="hours-container"> <div class="hours"></div> </div> <div class="minutes-container"> <div class="minutes"></div> </div> <div class="seconds-container"> <div class="seconds"></div> </div> </article> </div>
1、.box 是為了布局的方便;
2、 然后每個(gè)指針都需要一個(gè) *-container 容器 。
添加 CSS 樣式
把背景加載進(jìn)來,然后放在頁面中合適的位置上。
html{ font-size: 10px; }html,body{ margin: 0; padding: 0; }.box{ width: 35rem; height: 38rem; background: rgb(205,205,205); border-radius: 1rem; margin: 5% auto; display: flex; justify-content: center; align-items: center; }.clock{ width: 30rem; height: 30rem; background: #fff url(ios_clock.svg) no-repeat center; background-size: 88%; border-radius: 50%; position: relative; }
1、 width: 35rem; height: 38rem; 這個(gè)比例比較順眼吧;
2、 .box 使用 Flex 布局方式,并且使其中的 .clock 水中、垂直方向都居中??催^第一天教程應(yīng)該都明白 Flex 布局的。
3、Clock 的背景使用一張圖片。獲取地址
添加中心軸
使用 CSS3 中的 偽元素 為時(shí)鐘添加實(shí)心小圓點(diǎn),指針都圍著這個(gè)點(diǎn)轉(zhuǎn)。
.clock:after{ content: ''; width: 1.5rem; height: 1.5rem; background: #000; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); /* 向左上移動(dòng)自身的50% */ z-index: 10; }
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)在視圖的最上層,遮擋住指針交叉的地方
指針容器
.hours-container,.minutes-container,.seconds-container{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
1、容器被放置在 Clock 的上方,但是并沒有樣式,接下來就可以創(chuàng)建指針了!
添加指針
.hours { width: 3%; height: 20%; background: #000; transform-origin: 50% 100%; position: absolute; top: 30%; left: 48.5%; }.minutes { width: 2%; height: 37%; background: #000; transform-origin: 50% 100%; position: absolute; top: 13%; left: 49%; }.seconds { width: 1%; height: 40%; background: #f00; transform-origin: 50% 90%; position: absolute; top: 20%; left: 49.5%; z-index: 8; }
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ī)則
@keyframes rotate { 100% { transform: rotateZ(360deg); } }
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í)間。
.hours-container { animation: rotate 60s infinite linear; }.minutes-container { animation: rotate 30s infinite linear; }.seconds-container { animation: rotate 10s infinite linear; }
為了演示方便,這里固定的時(shí)間并沒有按照真實(shí)的 Clock 來設(shè)置。時(shí)針應(yīng)該是 12 小時(shí)(43200s)、分針應(yīng)該是 3600s 、秒針應(yīng)該是 60s 。
更像真實(shí)的 Clock
現(xiàn)實(shí)中的 Clock 大部分是秒針和分針都是會(huì)跳動(dòng)的,并且伴隨著滴答聲,我們來嘗試一下。
.hours-container { animation: rotate 60s infinite linear; }.minutes-container { animation: rotate 3600s infinite steps(60); }.seconds-container { animation: rotate 60s infinite steps(60); }
1、只需要將 分針 和 秒針的旋轉(zhuǎn)方式調(diào)整為 steps() 即可。
但是這樣的 Clock 每次刷新都是從 0 開始的,并不是我們需要的,怎么做一個(gè)顯示真實(shí)時(shí)間的呢??
正確的時(shí)間
我們首先要獲取到當(dāng)前的時(shí)間,然后計(jì)算每個(gè)指針應(yīng)該旋轉(zhuǎn)的角度即可。
獲取每個(gè)指針
const hourHand = document.querySelector('.hours-container');const minuteHand = document.querySelector('.minutes-container');const secondHand = document.querySelector('.seconds-container');
獲取當(dāng)前時(shí)間
const now = new Date();const hour = now.getHours();const minute = now.getMinutes();const second = now.getSeconds(); `
計(jì)算每個(gè)指針應(yīng)旋轉(zhuǎn)的角度
在 CSS3 中角度單位一共有四種:
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
很顯然,我們這里要用到的單位是 deg 。
const secondDegree = second * 6 + 90; const minuteDegree = minute * 6 + (second / 10) + 90; const hourDegree = (hour * 30) + (minute / 2) + 90;
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;
應(yīng)用角度值
hourHand.style.transform = `rotateZ(${hourDegree}deg)`; minuteHand.style.transform = `rotateZ(${minuteDegree}deg)`; secondHand.style.transform = `rotateZ(${secondDegree}deg)`;
為了使頁面能實(shí)時(shí)的更新,我們要把上面的這些東西封裝為一個(gè)函數(shù),然后用定時(shí)器每秒執(zhí)行一次。
整個(gè)時(shí)鐘的功能都完成了!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。