腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

JavaScript實現(xiàn)仿Clock ISO時鐘

更新時間：2018年06月29日 08:58:45 作者：web前端學(xué)習(xí)圈

這篇文章給大家分享了JavaScript實現(xiàn)仿Clock ISO時鐘的方法以及實例代碼，有興趣的朋友參考學(xué)習(xí)下下。

來模仿一個 ISO 上的時鐘：ISO Clock

實現(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 水中、垂直方向都居中?？催^第一天教程應(yīng)該都明白 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、使用 % 這種單位可以更好地適應(yīng)不同的屏幕。

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 ,應(yīng)用這個動畫的元素會沿著某個 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è)置。時針應(yīng)該是 12 小時（43200s）、分針應(yīng)該是 3600s 、秒針應(yīng)該是 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 開始的，并不是我們需要的，怎么做一個顯示真實時間的呢？？

正確的時間

我們首先要獲取到當前的時間，然后計算每個指針應(yīng)該旋轉(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();
`

計算每個指針應(yīng)旋轉(zhuǎn)的角度

在 CSS3 中角度單位一共有四種：

deg (度，一個圓 360 度)、
grad（梯度，一個圓共400梯度）、
turn （轉(zhuǎn)、圈，一個圓共1圈）、
rad （弧度，一個圓共2π弧度）
它們的對應(yīng)關(guān)系為：

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、時針稍微復(fù)雜一點，因為要考慮分鐘的影響，如過了30分鐘，相當于半小時。公式為：當前時數(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ù)，然后用定時器每秒執(zhí)行一次。

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

您可能感興趣的文章: