來模仿一個 ISO 上的時鐘:ISO Clock
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站建設(shè)、成都網(wǎng)站制作與策劃設(shè)計,駐馬店網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務涵蓋:駐馬店等地區(qū)。駐馬店做網(wǎng)站價格咨詢:028-86922220
實現(xiàn)效果:
ISO Clock
項目分析
1、首先時鐘嘛,肯定要獲取本地客戶端的時間;
2、時鐘有 3 個指針,我們可以通過添加動畫的方式讓它們圍繞中心點轉(zhuǎn)動;
3、通過獲取到的 hour、minute 和 second 值分別計算 時針、分針和秒針的角度值;
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、 然后每個指針都需要一個 *-container 容器 。
添加 CSS 樣式
把背景加載進來,然后放在頁面中合適的位置上。
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; 這個比例比較順眼吧;
2、 .box 使用 Flex 布局方式,并且使其中的 .clock 水中、垂直方向都居中??催^第一天教程應該都明白 Flex 布局的。
3、Clock 的背景使用一張圖片。獲取地址
添加中心軸
使用 CSS3 中的 偽元素 為時鐘添加實心小圓點,指針都圍著這個點轉(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%); /* 向左上移動自身的50% */ z-index: 10; }
1、 這句 content: ''; 是必須的,不然這個偽元素不會顯示,即使指定了寬度和高度。
2、 由于相對定位是從元素的左上角開始計算的,所以 top: 50%; left: 50%; 不能使這個小圓點在 Clock 的中心,使用 transform: translate(-50%,-50%); 向左上方移動自身寬度或高度的 50%
3、 z-index: 10; 是為了使這個小圓點在視圖的最上層,遮擋住指針交叉的地方
指針容器
.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、分別添加時針、分針和秒針。
2、 使用 % 這種單位可以更好地適應不同的屏幕。
3、transform-origin: 50% 90%; 規(guī)定指針旋轉(zhuǎn)的位置為:X 方向的中心線 和 Y 方向的 90% 處這條線的交叉點。(具體看圖吧)
4、 這里在定位的時候把自身的寬度計算在內(nèi)了,所以就不必在往左上角移動了。
動畫
目前為止,這個 Clock 還是沒有功能的,我們來讓它動起來。
定義動畫規(guī)則
@keyframes rotate { 100% { transform: rotateZ(360deg); } }
1、這里用 @keyframes 規(guī)則定義了一個動畫,這個動畫的名稱是 ratate ,應用這個動畫的元素會沿著某個 Z 軸(也就是上面規(guī)定好的哪個交叉點)旋轉(zhuǎn) 360 度。
定時功能
規(guī)定每個指針旋轉(zhuǎn) 360 度需要多長時間。
.hours-container { animation: rotate 60s infinite linear; }.minutes-container { animation: rotate 30s infinite linear; }.seconds-container { animation: rotate 10s infinite linear; }
為了演示方便,這里固定的時間并沒有按照真實的 Clock 來設(shè)置。時針應該是 12 小時(43200s)、分針應該是 3600s 、秒針應該是 60s 。
更像真實的 Clock
現(xiàn)實中的 Clock 大部分是秒針和分針都是會跳動的,并且伴隨著滴答聲,我們來嘗試一下。
.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 開始的,并不是我們需要的,怎么做一個顯示真實時間的呢??
正確的時間
我們首先要獲取到當前的時間,然后計算每個指針應該旋轉(zhuǎn)的角度即可。
獲取每個指針
const hourHand = document.querySelector('.hours-container');const minuteHand = document.querySelector('.minutes-container');const secondHand = document.querySelector('.seconds-container');
獲取當前時間
const now = new Date();const hour = now.getHours();const minute = now.getMinutes();const second = now.getSeconds(); `
計算每個指針應旋轉(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 是因為角度的起始位置為水平的 X 軸,為了和 Clock 指針起始位置(Y 軸)做統(tǒng)一;
2、秒針的計算最簡單,(second / 60) * 360 + 90;
3、 分針要考慮秒針的影響,如過了30秒,相當于半分鐘。公式為: 當前分鐘數(shù) + 秒數(shù)在分鐘的映射;即:(( minutes/ 60) * 360) + ((seconds / 60) * 6) + 90;
4、 時針稍微復雜一點,因為要考慮分鐘的影響,如過了30分鐘,相當于半小時。公式為: 當前時數(shù) + 分鐘在小時的映射 。即:(( hours/ 12) * 360) + ((minutes / 60) * 30) + 90;
應用角度值
hourHand.style.transform = `rotateZ(${hourDegree}deg)`; minuteHand.style.transform = `rotateZ(${minuteDegree}deg)`; secondHand.style.transform = `rotateZ(${secondDegree}deg)`;
為了使頁面能實時的更新,我們要把上面的這些東西封裝為一個函數(shù),然后用定時器每秒執(zhí)行一次。
整個時鐘的功能都完成了!
當前標題:JavaScript實現(xiàn)仿ClockISO時鐘
文章起源:http://muchs.cn/article36/geshsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供營銷型網(wǎng)站建設(shè)、ChatGPT、微信公眾號、微信小程序、網(wǎng)站設(shè)計公司、企業(yè)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)