[JS30] Day02: JS and CSS Clock

keywords: 時間, time

取得現在的時間

取得現在的時間

關於更多 JavaScript 時間函式

let now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();

將時間轉換成角度

let hourDeg = (hour / 12) * 360;
let minuteDeg = (minute / 60) * 360;
let secondDeg = (second / 60) * 360;

CSS 操作

利用 el.style.<styleAttribute> 來操作 CSS：

關於更多 JavaScript CSS 操作

const hourHand = document.querySelector('.hour-hand');
hourHand.style.transform = `rotate(${hourDeg + 90}deg) scaleX(0.7)`;

完成作品

Day2: JS and CSS Clock