「JavaScript 30」學習筆記（二）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

製作一個時鐘。

筆記

分別取得秒針、分針及時針三個元素。

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

• querySelector() 方法會返回匹配指定選擇器的第一個元素。

---

設定一個 setDate() 函式，用於操作指針。

function setDate() {
    const now = new Date();

    // 旋轉秒針
    const seconds = now.getSeconds();
    const secondsDegrees = ((seconds / 60) * 360) + 90;
    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

    // 旋轉分針
    const mins = now.getMinutes();
    const minsDegrees = (mins / 60) * 360 + 90;
    minHand.style.transform = `rotate(${minsDegrees}deg)`;

    // 旋轉時針
    const hours = now.getHours();
    const hoursDegrees = (hours / 12) * 360 + 90;
    hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
}

• Date 物件用於處理日期與時間。
• getSeconds() 方法會返回 Date 物件的秒數。
• transform 是 Style 物件的屬性，可以對元素進行旋轉、縮放、移動或傾斜。
• getMinutes() 方法會返回 Date 物件的分鐘。
• getHours() 方法會返回 Date 物件的小時。

---

設定每秒調用 setDate() 函式。

setInterval(setDate, 1000);

• setInterval() 方法會不停地按照指定的周期來調用函式。