AnalogClock.github.io/index.js at main · omlondhe/AnalogClock.github.io · GitHub

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
// setInterval(() => {
//   const date = new Date();
//   const hourTime = date.getHours();
//   const minuteTime = date.getMinutes();
//   const secondTime = date.getSeconds();

//   const hourRotation = 30 * hourTime + minuteTime / 2;
//   const minuteRotation = 6 * minuteTime;
//   const secondRotation = 6 * secondTime;

//   hour.style.transform = `rotate(${hourRotation}deg)`;
//   minute.style.transform = `rotate(${minuteRotation}deg)`;
//   second.style.transform = `rotate(${secondRotation}deg)`;
// }, 1000);

setInterval(() => {
  const date = new Date();
  const hourTime = date.getHours();
  const minuteTime = date.getMinutes();

  const hourRotation = 30 * hourTime + minuteTime / 2;

  hour.style.transform = `rotate(${hourRotation}deg)`;
}, 1000);

setTimeout(() => {
  setInterval(() => {
    const date = new Date();
    const minuteTime = date.getMinutes();

    const minuteRotation = 6 * minuteTime;

    minute.style.transform = `rotate(${minuteRotation}deg)`;
  }, 1000);
}, 500);

setTimeout(() => {
  setInterval(() => {
    const date = new Date();
    const secondTime = date.getSeconds();

    const secondRotation = 6 * secondTime;

    second.style.transform = `rotate(${secondRotation}deg)`;
  }, 1000);
}, 1000);

setTimeout(() => {
  document.getElementById("hour").classList.add("hour");
}, 500);
setTimeout(() => {
  document.getElementById("minute").classList.add("minute");
}, 1000);
setTimeout(() => {
  document.getElementById("second").classList.add("second");
}, 1500);