[JS30] Day 2: CSS + JS Clock

JavaScript

 2018/06/27  Share

Day 2: CSS + JS Clock

使用 JS 及 CSS 製作出一個簡易的時鐘。

主要練習:

CSS - transform
JS - Date
JS - HTMLElement.style
JS - window.setInterval()

設定 CSS 樣式

CSS - transform

開啟專案後，可以看到所有只指針都指在9點鐘的方向，這時我們需要用 CSS transform的功能去調整指針的位置到12點鐘方向。

在 CSS 中找到 .hand 並加入以下程式碼:

.hand {
  transform-origin: 100%; /* 將元素的最右方做為旋轉軸心 */
  transform: rotate(90deg); /* 以軸心為基準旋轉90度 */
  transition: all 0.05s; /* 漸變 */
}

抓取現在時間

Step1 : 建立函式

在 javascript 中，若要取得現在時間我們使用new Date()，若要取其中的年月日…等，就取用Date物件裡的方法，取出所需要的值，Date物件裡的所有方法可以在這邊查詢，這個範例只會使用到小時、分鐘、秒數。

function getTime(){
  const now = new Date();
  // 取得當前小時、分鐘、秒數
  const hour = now.getHours();
  const min = now.getMinutes();
  const sec = now.getSeconds();
}

Step2 : 計算角度並指向當前時間的位置

接下來，我們需要計算時針、分針及秒針走一格所需的角度乘以當前時間並加上剛剛在 CSS 中旋轉的 90 度，來讓指針指在當前時間正確的位置。

在剛剛的getTime() 裡加上角度的計算:

function getTime(){
  // 秒針走一格的角度 * sec + 一開始CSS轉了90度
  const secDeg = 360 / 60 * sec + 90;
  const minDeg = 360 / 60 * min + 90 + 6 / 60 * sec;
  const hourDeg = 360 / 12 * hour + 90 + 30 / 60 * min;
}

在這，妳可能會發現，在時針以及分針的地方，後面怎麼多了一段計算，這是因為如果不多加這個計算過程，在指針的指向上會出現一些問題，例如:在 5 點 59 分時時針一樣指在 5 的方向，過了一分鐘到了 6 點，時針會直接從 5 跳到 6 ，一般的時鐘是不會這樣的。

所以我們在這邊做個微調，分別在分針及秒針在細分成 60 等分，然後再分別乘上對應的秒數及分鐘數。

再來，就讓讓各指針指向所對應的時間上，這裡透過 JS HTMLElement.style 去控制 CSS 裡的 transform ，分別讓他們旋轉到當前時間所對應的位置。

function getTime(){
  // 秒針走一格的角度 * sec + 一開始CSS轉了90度
  const secDeg = 360 / 60 * sec + 90;
  const minDeg = 360 / 60 * min + 90 + 6 / 60 * sec;
  const hourDeg = 360 / 12 * hour + 90 + 30 / 60 * min;
  
  const secondHand = document.querySelector('.second-hand');
  const minHand = document.querySelector('.min-hand');
  const hourHand = document.querySelector('.hour-hand');
  secondHand.style.transform =`rotate( ${ secDeg }deg )`;
  minHand.style.transform = `rotate( ${ minDeg }deg )`;
  hourHand.style.transform = `rotate( ${ hourDeg }deg )`;
}

Step3 : 開始轉動

要讓指針開始轉動，因為需要多次執行，所以我們使用setInterval()。
setInterval(function, time)，就是每time的時間就執行一次function :

1	setInterval(getTime, 1000);

到這，就完成啦!

完整 JS

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

function getTime(){
  const now = new Date();
  const hour = now.getHours();
  const min = now.getMinutes();
  const sec = now.getSeconds();

  const secDeg = 360 / 60 * sec + 90;
  secondHand.style.transform =`rotate( ${ secDeg }deg )`;

  const minDeg = 360 / 60 * min + 6 / 60 * sec + 90;
  minHand.style.transform = `rotate( ${ minDeg }deg )`;

  const hourDeg = 360 / 12 * hour + 30 / 60 * min + 90;
  hourHand.style.transform = `rotate( ${ hourDeg }deg )`;
}
setInterval(getTime, 1000);
getTime();