Relogio-Digital/index.html at main · EricksOliveira/Relogio-Digital · 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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Relogio Digital!</title>
</head>
<body>
    <div id="time">
        <div class="circle" style="--clr: #ff2972;">
            <div class="dot hora_dot"></div>
            <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70" id="hh"></circle>
            </svg>
            <div id="hora">00</div>
        </div>
        <div class="circle" style="--clr: #fee800;">
            <div class="dot min_dot"></div>
            <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70" id="mm"></circle>
            </svg>
            <div id="minuto">00</div>
        </div>
        <div class="circle" style="--clr: #04fc49;">
            <div class="dot seg_dot"></div>
            <svg>
                <circle cx="70" cy="70" r="70"></circle>
                <circle cx="70" cy="70" r="70" id="ss"></circle>
            </svg>
            <div id="segundo">00</div>
        </div>
        <div class="ap">
            <div id="ampm">PM</div>
        </div>
    </div>

    <script>

        setInterval(()=>{
        let hora = document.getElementById('hora');
        let minuto = document.getElementById('minuto');
        let segundo = document.getElementById('segundo');
        let ampm = document.getElementById('ampm');

        let hh = document.getElementById('hh');
        let mm = document.getElementById('mm');
        let ss = document.getElementById('ss');

        let hora_dot = document.querySelector('.hora_dot');
        let min_dot = document.querySelector('.min_dot');
        let seg_dot = document.querySelector('.seg_dot');

        let h = new Date().getHours();
        let m = new Date().getMinutes();
        let s = new Date().getSeconds();
        let am = h >=12 ? "PM" : "AM";

        // convertendo 24h para 12h
        if (h > 12){
            h = h - 12;
        }

        //adicionando 0 a esquerda
        h = (h < 10) ? "0" + h: h;
        m = (m < 10) ? "0" + m: m;
        s = (s < 10) ? "0" + s: s;

        hora.innerHTML = h + "<br><span>Hora</span>";
        minuto.innerHTML = m + "<br><span>Minuto</span>";
        segundo.innerHTML = s + "<br><span>Segundo</span>";
        ampm.innerHTML = am;

        // 12 horas clock
        hh.style.strokeDashoffset = 440 - (440 * h) / 12;
        // 60 minutos
        mm.style.strokeDashoffset = 440 - (440 * m) / 60;
        // 60 segundos
        ss.style.strokeDashoffset = 440 - (440 * s) / 60;

        hora_dot.style.transform = `rotate(${h * 30}deg)`;
        // 360 / 12 = 30
        min_dot.style.transform = `rotate(${m * 6}deg)`;
        seg_dot.style.transform = `rotate(${s * 6}deg)`;
        // 360 / 60 = 6
    })

    </script>

</body>
</html>