forked from wesbos/JavaScript30
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathscript.js
More file actions
61 lines (49 loc) · 1.79 KB
/
script.js
File metadata and controls
61 lines (49 loc) · 1.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/**
* Created by iraquitan on 12/12/16.
*/
function secToDeg(s) {
return 90+(360*s/60);
}
function minToDeg(m) {
return 90+(360*m/60);
}
function hourToDeg(h) {
return 90+(360*h/12);
}
const hourHand = document.querySelector('.hour-hand');
const minuteHand = document.querySelector('.min-hand');
const secondHand = document.querySelector('.second-hand');
for (var h of [hourHand, minuteHand, secondHand]) {
h.style.transition = 'all 2s';
h.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)';
}
function setDate() {
// Turn off transition effects
for (var h of [hourHand, minuteHand, secondHand]) {
h.style.transition = 'none';
}
const now = new Date();
const hours = now.getHours() + (now.getMinutes() / 60);
const minutes = now.getMinutes() + (now.getSeconds() / 60);
const seconds = now.getSeconds();
if (seconds <= 0 || seconds >= 59) {
secondHand.style.transition = 'none';
} else {
secondHand.style.transition = 'all 0.05s';
secondHand.style.transitionTimingFunction = 'cubic-bezier(0.1, 3.5, 0.25, 1)';
}
hourHand.style.transform = `rotate(${hourToDeg(hours)}deg)`;
minuteHand.style.transform = `rotate(${minToDeg(minutes)}deg)`;
secondHand.style.transform = `rotate(${secToDeg(seconds)}deg)`;
}
function initClock() {
const now = new Date();
const hours = now.getHours() + (now.getMinutes() / 60);
const minutes = now.getMinutes() + (now.getSeconds() / 60);
const seconds = now.getSeconds();
hourHand.style.transform = `rotate(${hourToDeg(hours)}deg)`;
minuteHand.style.transform = `rotate(${minToDeg(minutes)}deg)`;
secondHand.style.transform = `rotate(${secToDeg(seconds)}deg)`;
setTimeout(setInterval.bind(null, setDate, 1000), 1000);
}
setTimeout(initClock, 0);