-
Notifications
You must be signed in to change notification settings - Fork 0
/
AnalogClock.js
41 lines (35 loc) · 1.21 KB
/
AnalogClock.js
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
const setTimeEvent = (elements) => {
const [$hour, $minutes, $seconds] = elements;
//실제 시간 및 1초당 움직이는 각도구하기
setInterval(() => {
const date = new Date();
const hour = date.getHours() % 12;
const minutes = date.getMinutes();
const seconds = date.getSeconds();
$seconds.style.setProperty('--deg', seconds * 6);
$minutes.style.setProperty('--deg', minutes * 6 + seconds * 0.1);
$hour.style.setProperty('--deg', hour * 30 + minutes * 0.5);
}, 1000);
};
// 동적으로 DOM 생성
const displayTimeDOM = ($container) => {
const $hour = document.createElement('div');
$hour.className = 'hand hour';
const $minute = document.createElement('div');
$minute.className = 'hand minute';
const $second = document.createElement('div');
$second.className = 'hand second';
for (let i = 1; i <= 12; i++) {
const $time = document.createElement('div');
$time.className = `time time${i}`;
$time.innerText = i;
$container.appendChild($time);
}
return [$hour, $minute, $second];
};
const AnalogClock = ($container) => {
const elements = displayTimeDOM($container);
$container.append(...elements);
setTimeEvent(elements);
};
export default AnalogClock;