JS30 day02 - Clock

作業內容

今天要做的是做出一個網頁，裡面有個時鐘會表現出現在的時間，當然秒針 / 分針 / 時針也要跟著動

JS 的部分我放在下面這邊：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const secondsHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hoursHand = document.querySelector('.hour-hand');

function secondCall(e){
  const now = new Date();

  const seconds = now.getSeconds();
  const secondsDegree = ((seconds / 60) * 360) + 90;
  secondsHand.style.transform = `rotate(${secondsDegree}deg)`;

  const mins = now.getMinutes();
  const minsDegree = ((mins / 60) * 360) + ((seconds / 60 / 60) * 360) + 90;
  minsHand.style.transform = `rotate(${minsDegree}deg)`;

  const hours = now.getHours();
  const hoursDegree = ((hours / 12) * 360) + ((mins / 60) / 12 * 360) + 90;
  hoursHand.style.transform = `rotate(${hoursDegree}deg)`;
}

setInterval(secondCall, 1000);

學到什麼

重要的列點如下：

1. 好像是第一次使用 JS 的物件 XD const now = new Date();，這概念對我來說很接近 Ruby 的 class，其他可用的物件可參考這個網站：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

2. now.getSeconds(); 這裏的 getSeconds() 是 Date 的 protoype 被賦予的方法

3. secondsHand.style.transform = 使用.style去增加這個節點的 css 屬性，可參考這邊：https://www.w3schools.com/jsref/prop_style_transform.asp

4. setInterval(secondCall, 1000); setTimeout() 只會執行一次就結束，而 setInterval() 則是會在間隔固定的時間不斷重複

5. CSS：transform-origin 可以改變你這個節點改變的位置

6. transition-timing-function 這個屬性竟然可以對於動畫的過程做出像時鐘這樣超過一點再回來的動畫，這是之前沒想過的

總結

才做了兩天的作業就覺得這比我預期中的還有趣，而我覺得這 JS30 厲害的是這些東西的靈感來源，終於感覺有越來越了解 JS 了 XD

參考資料：
https://github.com/wesbos/JavaScript30

• ← Previous Post
• Next Post →