clock/app.js at master · nihvix/clock · 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
/* ====================
        VARIABLES
   ==================== */
var degrees = 6;
var secHand;
var minHand;
var hourHand;

/* ====================
        FUNCIONES
======================= */
/**
 * Función que desarrolla el funcionamiento del reloj analógico
 */
function analogClock() {
    let date = new Date();
    let secs = date.getSeconds() * degrees;
    let mins = date.getMinutes() * degrees;
    let hours = date.getHours() * 30;
    let translation = " translate(-50%, -100%)";
    secHand.style.transform = translation + `rotateZ(${secs}deg) `;
    minHand.style.transform = translation + `rotateZ(${mins}deg) `;
    hourHand.style.transform = translation + `rotateZ(${hours + (mins / 12)}deg) `;
}

/**
 * Función que realiza el cálculo de la hora para el reloj digital
 */
function digitalClock() {
    let digitalTime = document.getElementById("digitalTime");
    let date = new Date();
    let secs = date.getSeconds();
    let mins = date.getMinutes();
    let hours = date.getHours();
    let day_night = 'AM';

    if (hours > 12) {
        day_night = 'PM';
        hours = hours - 12;
    }
    if (hours < 10) {
        hours = "0" + hours;
    }
    if (mins < 10) {
        mins = "0" + mins;
    }
    if (secs < 10) {
        secs = "0" + secs;
    }
    digitalTime.textContent = hours + ":" + mins + ":" + secs + " " + day_night;
}

/* =====================
    EVENTO PRINCIPAL
========================*/
function DOMLoaded() {
    secHand = document.getElementById("secsHand");
    minHand = document.getElementById("minsHand");
    hourHand = document.getElementById("hoursHand");

    setInterval(analogClock, 1000);
    setInterval(digitalClock, 1000);
}

/* =====================
    LLAMADA PRINCIPAL
======================== */
document.addEventListener('DOMContentLoaded', DOMLoaded);