[筆記][JS30天-Day02] CSS + JS Clock

實做：使用CSS + JS 做出時鐘

---

學習重點

• CSS 旋轉效果
• 獲取時間換算角度
• 利用 javascript 控制 CSS

---

解說

• 會用到以下CSS

transform-oragin
transform: rotate()
transition: all 0.05s
transition-timing-function: cubic-bezier(x, x, x, x)

1. transform-oragin : 調整指針初始位置
2. transform: rotate() ：指針角度控制
3. transition ：指針跳動的過渡效果
4. transition-timing-function : 呈現指針會有滴答滴答的效果

• 利用 setInterval 每秒更新指針角度

setInterval(function, 1000);

• 獲取時間並換算角度

let now = new Date();
let sec = now.getSeconds();
let secDeg = (sec/60) * 360;

• 操作CSS

const secHand = document.querySelector(".sec-hand");
secHand.style.transform = `rotate(${secDeg+90}deg) scale(0.9, 0.5)`;

補充

transform-origin