02 - JS and CSS Clock
Demo
簡介
利用 CSS transition 效果和 JS 動態讓時鐘轉動
程式
.hand {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1)
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
const secondHand = document.querySelector('.second-hand');
const minsHand = document.querySelector('.min-hand');
const hourHand = document.querySelector('.hour-hand');
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);
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
const hourDegrees = (((hour / 12) * 360) + 90);
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
setInterval(setDate, 1000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
作法
- 先將指針利用 CSS transition 設置剛好指向 12 點鐘，以便 JS 好操作
- transform-origin 設定元素變化的原點
- transform 元素可以被平移、旋轉、縮放和傾斜
- transition-timing-function 動畫
- 獲取基本的時、分、秒
getHours()、getMinutes()、getSeconds()
- 計算角度後放入 css 中