JavaScript實現仿Clock ISO時鐘

來源：懂視網責編：小采時間：2020-11-27 22:12:15

JavaScript實現仿Clock ISO時鐘

JavaScript實現仿Clock ISO時鐘:來模仿一個 ISO 上的時鐘：ISO Clock 實現效果： ISO Clock 項目分析 1、首先時鐘嘛，肯定要獲取本地客戶端的時間； 2、時鐘有 3 個指針，我們可以通過添加動畫的方式讓它們圍繞中心點轉動； 3、通過獲取到的 hour、minute 和 second 值分別

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript實現仿Clock ISO時鐘:來模仿一個 ISO 上的時鐘：ISO Clock 實現效果： ISO Clock 項目分析 1、首先時鐘嘛，肯定要獲取本地客戶端的時間； 2、時鐘有 3 個指針，我們可以通過添加動畫的方式讓它們圍繞中心點轉動； 3、通過獲取到的 hour、minute 和 second 值分別

更像真實的 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 中角度單位一共有四種：

deg (度，一個圓 360 度)、

grad（梯度，一個圓共400梯度）、

turn （轉、圈，一個圓共1圈）、

rad （弧度，一個圓共2π弧度）

它們的對應關系為：

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)`;

為了使頁面能實時的更新，我們要把上面的這些東西封裝為一個函數，然后用定時器每秒執行一次。

整個時鐘的功能都完成了！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript實現仿Clock ISO時鐘

推薦度：

點擊下載本文 文檔為doc格式

標簽：實現 ISO 時鐘

熱門焦點

JavaScript實現仿Clock ISO時鐘

JavaScript實現仿Clock ISO時鐘

JavaScript實現仿Clock ISO時鐘

最新推薦

猜你喜歡

熱門推薦