溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
來模仿一個 ISO 上的時鐘：ISO Clock
實現效果：
ISO Clock
項目分析
1、首先時鐘嘛，肯定要獲取本地客戶端的時間；
2、時鐘有 3 個指針，我們可以通過添加動畫的方式讓它們圍繞中心點轉動；
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 中的 偽元素 為時鐘添加實心小圓點，指針都圍著這個點轉。
.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 的上方，但是并沒有樣式，接下來就可以創建指針了！
添加指針
.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%; 規定指針旋轉的位置為：X 方向的中心線 和 Y 方向的 90% 處這條線的交叉點。（具體看圖吧）
4、 這里在定位的時候把自身的寬度計算在內了，所以就不必在往左上角移動了。
動畫
目前為止，這個 Clock 還是沒有功能的，我們來讓它動起來。
定義動畫規則
@keyframes rotate {
100% { transform: rotateZ(360deg);
}
}
1、這里用 @keyframes 規則定義了一個動畫，這個動畫的名稱是 ratate ,應用這個動畫的元素會沿著某個 Z 軸（也就是上面規定好的哪個交叉點）旋轉 360 度。
定時功能
規定每個指針旋轉 360 度需要多長時間。
.hours-container { animation: rotate 60s infinite linear;
}.minutes-container { animation: rotate 30s infinite linear;
}.seconds-container { animation: rotate 10s infinite linear;
}
為了演示方便，這里固定的時間并沒有按照真實的 Clock 來設置。時針應該是 12 小時（43200s）、分針應該是 3600s 、秒針應該是 60s 。
更像真實的 Clock
現實中的 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、只需要將 分針 和 秒針的旋轉方式調整為 steps() 即可。
但是這樣的 Clock 每次刷新都是從 0 開始的，并不是我們需要的，怎么做一個顯示真實時間的呢？？
正確的時間
我們首先要獲取到當前的時間，然后計算每個指針應該旋轉的角度即可。
獲取每個指針
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(); `
計算每個指針應旋轉的角度
在 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 軸）做統一；
2、秒針的計算最簡單，(second / 60) * 360 + 90;
3、 分針要考慮秒針的影響，如過了30秒，相當于半分鐘。公式為： 當前分鐘數 + 秒數在分鐘的映射；即：(( minutes/ 60) * 360) + ((seconds / 60) * 6) + 90;
4、 時針稍微復雜一點，因為要考慮分鐘的影響，如過了30分鐘，相當于半小時。公式為： 當前時數 + 分鐘在小時的映射 。即：(( 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)`;
為了使頁面能實時的更新，我們要把上面的這些東西封裝為一個函數，然后用定時器每秒執行一次。
整個時鐘的功能都完成了！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
