用 CSS 和 JS 實現時鐘效果

這道題來自於 Wes Bos[1] 的 JavaScript30[2] 教程。

JavaScirpt30 是 Wes Bos 推出的一個 30 天挑戰。項目免費提供了 30 個視頻教程、30 個挑戰的起始文檔和 30 個挑戰解決方案源代碼。目的是幫助人們用純 JavaScript 來寫東西，不借助框架和庫，也不使用編譯器和引用。

這道題使用 CSS 和 JavaScript 實現一個時鐘，效果如下圖所示：

問題本身並不複雜，有很多思路可以實現，難點是如何儘量少的 JS 最簡單地實現。有興趣的同學可以挑戰一下，在碼上掘金上覆制這個模板 [3] 開始你的挑戰。

好，如果你已經嘗試過了挑戰，可以看一下參考答案 [4]，看看這個實現方法和你的思路是否一致。然後我們來看看，通過這個挑戰，能學到什麼知識。

關鍵知識點

  1. HTML 結構和基礎 CSS

  2. CSS 關鍵幀動畫

  3. JS 控制 animation-delay

HTML 結構和基礎 CSS

時鐘的 HTML 結構比較簡單：

<div class="clock">
  <div class="clock-face">
    <div class="hand hour-hand"></div>
    <div class="hand min-hand"></div>
    <div class="hand second-hand"></div>
  </div>
</div>

.clock是時鐘主體，.clock-face是時鐘面板，其中有三個指針，分別是時針、分針和秒針。外框是一個圓盤，我們通過border-radius:50%來繪製圓形邊框，用box-shadow來給邊框添加一些細節。

.clock {
  width: 30rem;
  height: 30rem;
  border: 20px solid white;
  border-radius: 50%;
  margin: 50px auto;
  position: relative;
  padding: 2rem;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.1),
    inset 0 0 0 3px #EFEFEF,
    inset 0 0 10px black,
    0 0 10px rgba(0,0,0,0.2);
}

內面板包括三個指針的定位，時鐘中心有個小圓點，我們用.clock-face:after僞元素實現。

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(-3px); /* account for the height of the clock hands */
}

.clock-face:after {
  width: 1em;
  height: 1em;
  left: 50%;
  top: 50%;
  position: absolute;
  display: block;
  content: '';
  background-color: #a8c5d1;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.1),
    0 0 10px rgba(0,0,0,0.2);
  transform: translate(-50%, -50%);
}

注意到這裏我們的把僞元素定位在時鐘的中心，通過position:absolute，然後top和left定位到50%，再設置transform: translate(-50%, -50%)，這是一種常用的垂直水平居中的技巧。接着是三個指針的樣式：

.hand {
  width: 50%;
  height: 6px;
  background: black;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
  box-shadow: 0 0 0 0.1px #fff, 
    0 0 0 1px rgb(0 0 0 / 10%), 
    0 0 8px rgb(0 0 0 / 50%), 
    2px 4px 1px rgb(0 0 0 / 50%);
}

.second-hand {
  height: 3px;
  background-color: #ff0e0e;
  border-bottom-left-radius: 100%;
  border-top-left-radius: 100%;
}

.min-hand {
  background-color: white;
  width: 45%;
  left: 5%;
}

.hour-hand {
  background-color: white;
  border-radius: 5px;
  width: 40%;
  height: 12px;
  left: 10%;
}

這裏我們注意一個細節，秒針的樣式裏面我們用border-bottom-left-radius: 100%; border-top-left-radius: 100%;來將指針設置爲尖頭效果，原理如下：https://code.juejin.cn/pen/7120417727843401764

CSS 關鍵幀動畫

接下來我們給時鐘定義 CSS 關鍵幀動畫：

@keyframes circle {
  to {transform: rotate(1.25turn);}
}

這個keyframes動畫很簡單，控制元素旋轉到1.25周。爲什麼是1.25turn呢，還記得前面我們指針的 CSS 裏有translate:transform(90deg)，因爲指針的初始值是在 12 點鐘的位置，所以轉過了 90 度，對應也就是0.25turn，所以要再轉一週的話，就是0.25+1=1.25turn。接下來我們將動畫賦給指針：

.second-hand {
  animation: circle 60s steps(60, end) infinite;
}

.min-hand {
  animation: circle 3600s linear infinite;
}

.hour-hand {
  animation: circle 43200s linear infinite;
}

秒針是 60 秒一週，分針是 3600 秒一週，時針是 43200 秒一週；秒針是一格一格運動，可以用steps這個特殊的timing-function來實現。要了解 CSS 動畫更詳細的使用方法，可以詳細閱讀 MDN 文檔 [5] 到此爲止，我們已經實現了時鐘幾乎所有的功能，但是這個時鐘是從 12 點 0 分 0 秒開始運行的，如何能讓它同步到實際的時間呢？

JS 控制 animation-delay

我們可以設置 animation-delay 屬性讓動畫延遲運行，而有趣的是，animation-delay是可以設置爲負值的，那樣它將讓動畫提前運行。比如我們把 animation-delay 設置爲 -1800s，那麼時鐘就會提前半小時運行，那也就意味着當你打開瀏覽器的時候，看到的就是 12 點 30 分 0 秒的狀態了。這樣問題就簡單了，我們只要在訪問頁面的過程中，通過 JavaScript 獲得當前的時間，然後將animation-delay設置爲負數的當前時間就可以了，具體代碼如下：

const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');

function init() {
  const now = new Date();
  const seconds = now.getSeconds();
  secondHand.style.animationDelay = `-${seconds}s`;
  const mins = now.getMinutes() * 60 + seconds;
  minsHand.style.animationDelay = `-${mins}s`;
  const hours = now.getHours() * 3600 + mins;
  hourHand.style.animationDelay = `-${hours}s`;
}

init();

這樣我們就可以在打開頁面的時候把時鐘設置爲當前時間了，之後直接讓 CSS 動畫自己運轉就可以，不需要 JS 來控制了。

總結

以上就是所有內容，最後我們再總結一下學到的知識點：

  1. HTML 結構和基礎 CSS

🎯 通過border-radius:50%來繪製圓形邊框，用box-shadow來給邊框添加一些細節；通過position:absolute，然後top和left定位到50%，再設置transform: translate(-50%, -50%)來定位居中；用border-bottom-left-radius: 100%; border-top-left-radius: 100%;來將指針設置爲尖頭效果。

  1. CSS 關鍵幀動畫

🎯 steps這個特殊的timing-function可以實現秒針運動的效果。

  1. JS 控制 animation-delay

🎯 可以設置 animation-delay 屬性讓動畫延遲運行；animation-delay可以設置爲負值；我們只要在訪問頁面的過程中，通過 JavaScript 獲得當前的時間，然後將animation-delay設置爲負數的當前時間，完成初始化，就可以依靠 CSS 動畫自己運轉。

參考資料

[1]

https://github.com/wesbos: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fwesbos

[2]

https://javascript30.com/: https://link.juejin.cn?target=https%3A%2F%2Fjavascript30.com%2F

[3]

https://code.juejin.cn/pen/./7114180236664635429: https://code.juejin.cn/pen/./7114180236664635429

[4]

https://code.juejin.cn/pen/./7111511848200962062: https://code.juejin.cn/pen/./7111511848200962062

[5]

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations: https://link.juejin.cn?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FCSS%2FCSS_Animations%2FUsing_CSS_animations

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/MSr_df-FkRnrgFuTdKR-sg

猜你喜歡