Day2: JS and CSS Clock

Copy 
1const secondsDegrees = seconds * 6; // （360度/60秒= 1秒6度 ）
2const minsDegrees = mins * 6 + (seconds * 6) / 60; //（360度/60分鐘= 1分鐘6度 ，目前分鐘*6度）+ （目前秒*6度/60秒）
3const hourDegrees = hour * 30 + (mins * 30) / 60; //（360度/12小時 = 1小時30度， 目前小時*30度）+（目前分鐘*30度/60分鐘）

Copy 
1(() => {
2  const hourHand = document.querySelector(".hour-hand");
3  const minsHand = document.querySelector(".min-hand");
4  const secondsHand = document.querySelector(".second-hand");
5
6  const setTime = () => {
7    const now = new Date();
8    const seconds = now.getSeconds();
9    const mins = now.getMinutes();
10    const hour = now.getHours();
11
12    const secondsDegrees = seconds * 6; // （360度/60秒= 1秒6度 ）
13    const minsDegrees = mins * 6 + (seconds * 6) / 60; //（360度/60分鐘= 1分鐘6度 ，目前分鐘*6度）+ （目前秒*6度/60秒）
14    const hourDegrees = hour * 30 + (mins * 30) / 60; //（360度/12小時 = 1小時30度， 目前小時*30度）+（目前分鐘*30度/60分鐘）
15
16    secondsHand.style.transform = `rotate(${secondsDegrees}deg)`;
17    minsHand.style.transform = `rotate(${minsDegrees}deg)`;
18    hourHand.style.transform = `rotate(${hourDegrees}deg)`;
19  };
20
21  setInterval(setTime, 1000);
22  setTime(); //初始化畫面
23})();