【JS30】Day02:CSS + JS Clock

javascript 30day

目標:使畫面指針依照電腦時間進行動態效果。

一、 調整畫面指針

設定指針的 CSS 下屬性。

transform-origin: 100%;
// 改變位置水平垂直位置
transform: rotate(90deg);
// 改變角度,使指針以 12 點鐘方向為起始
transition-timing-function: cubic-bezier(0.1, 2.7, 0.25, 1);
// 利用貝茲曲線製造出指針動態的彈出效果

二、取得當下時間

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

const seconds = now.getSeconds();
// 取得秒數
const secondsDegree = (seconds / 60) * 360 + 90;
// 計算角度
secondsHand.style.transform = `rotate(${secondsDegree}deg)`;
// 使用style transform 動態改變角度

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

const hour = now.getHours();
const hourDegree = (mins / 12) * 360 + 90;
hourHand.style.transform = `rotate(${hourDegree}deg)`;
}

setInterval(setDate, 1000);
// 每秒執行一次 setDate function

使用技巧

  • newDate
  • transform
  • el.style.styleAttribute
【JS30】Day01:JavaScript Drum Kit

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×