來(lái)模仿一個(gè) ISO 上的時(shí)鐘：ISO Clock

實(shí)現(xiàn)效果：

ISO Clock

項(xiàng)目分析

1、首先時(shí)鐘嘛，肯定要獲取本地客戶(hù)端的時(shí)間；

2、時(shí)鐘有 3 個(gè)指針，我們可以通過(guò)添加動(dòng)畫(huà)的方式讓它們圍繞中心點(diǎn)轉(zhuǎn)動(dòng)；

3、通過(guò)獲取到的 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)來(lái)，然后放在頁(yè)面中合適的位置上。

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 水中、垂直方向都居中?？催^(guò)第一天教程應(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ì)定位是從元素的左上角開(kāi)始計(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 的上方，但是并沒(méi)有樣式，接下來(lái)就可以創(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)畫(huà)

目前為止，這個(gè) Clock 還是沒(méi)有功能的，我們來(lái)讓它動(dòng)起來(lái)。

定義動(dòng)畫(huà)規(guī)則

@keyframes rotate {
  100% {    transform: rotateZ(360deg);
  }
}

1、這里用 @keyframes 規(guī)則定義了一個(gè)動(dòng)畫(huà)，這個(gè)動(dòng)畫(huà)的名稱(chēng)是 ratate ,應(yīng)用這個(gè)動(dòng)畫(huà)的元素會(huì)沿著某個(gè) Z 軸（也就是上面規(guī)定好的哪個(gè)交叉點(diǎn)）旋轉(zhuǎn) 360 度。

定時(shí)功能

規(guī)定每個(gè)指針旋轉(zhuǎn) 360 度需要多長(zhǎng)時(shí)間。

.hours-container {  animation: rotate 60s infinite linear;
}.minutes-container {  animation: rotate 30s infinite linear;
}.seconds-container {  animation: rotate 10s infinite linear;
}

為了演示方便，這里固定的時(shí)間并沒(méi)有按照真實(shí)的 Clock 來(lái)設(shè)置。時(shí)針應(yīng)該是 12 小時(shí)（43200s）、分針應(yīng)該是 3600s 、秒針應(yīng)該是 60s 。

更像真實(shí)的 Clock

現(xiàn)實(shí)中的 Clock 大部分是秒針和分針都是會(huì)跳動(dòng)的，并且伴隨著滴答聲，我們來(lái)嘗試一下。

.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 開(kāi)始的，并不是我們需要的，怎么做一個(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 中角度單位一共有四種：

• deg (度，一個(gè)圓 360 度)、
• grad（梯度，一個(gè)圓共400梯度）、
• turn （轉(zhuǎn)、圈，一個(gè)圓共1圈）、
• rad （弧度，一個(gè)圓共2π弧度）
• 它們的對(duì)應(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 是因?yàn)榻嵌鹊钠鹗嘉恢脼樗降?X 軸，為了和 Clock 指針起始位置（Y 軸）做統(tǒng)一；

2、秒針的計(jì)算最簡(jiǎn)單，(second / 60) * 360 + 90;

3、 分針要考慮秒針的影響，如過(guò)了30秒，相當(dāng)于半分鐘。公式為： 當(dāng)前分鐘數(shù) + 秒數(shù)在分鐘的映射；即：(( minutes/ 60) * 360) + ((seconds / 60) * 6) + 90;

4、 時(shí)針稍微復(fù)雜一點(diǎn)，因?yàn)橐紤]分鐘的影響，如過(guò)了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)`;

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

整個(gè)時(shí)鐘的功能都完成了！

最新評(píng)論