Como Crear un Reloj Digital (Numérico) con JavaScript

4 minuto(s)

En esta página:

Demo Github

Con JavaScript se han creado cosas geniales, hasta la fecha de este Post sigue siendo el Lenguaje de Programación que esta presente en toda interface de usuario Front, vamos a crear un reloj que use la hora del sistema, es decir la hora actual de la computador del usuario, el reloj va tener números que estarán compuestos por la hora, minutos y segundos, es decir un reloj numérico, vamos con este Post.

Antes de continuar te invito a leer los siguiente artículos:

Asimismo te invito a escuchar el Podcast: “Consejos Para Tener Más Tiempo Para Programar”:

Spotify:	Sound Cloud:	Apple Podcasts

Bien ahora continuemos con el Post: Como Crear un Reloj Digital (Numérico) con JavaScript.

HTML

Para crear nuestro reloj aplicaremos un poco de CSS, obviamente HTML y JavaScript, en cuanto al HTML solamente voy a necesitar una capa contenedora o div que mediante el evento on load me cargue mi función JavaScript que mostrará el reloj numérico.


<!-- Cuando la página carga (onload), llamamos al método cargarReloj() de JavaScript -->
<div id="relojnumerico" class="reloj" onload="cargarReloj()">
    <!-- Acá mostraremos el reloj desde JavaScript --> 
</div>

</div>

El codigo HTML anterior es lo único que necesitaré para mostrar el reloj, la mayoría del trabajo lo hará JavaScript.

JavaScript

El Lenguaje de Programación JavaScript cuenta con el objeto Date() que nos devuelve la fecha y hora actual, luego extraemos solamente la hora con los minutos y segundos actuales. Con los datos obtenidos podemos personalizar como se mostrará el reloj, en el código he colocado comentarios para explicar que hace cada pare del código JavaScript.


function cargarReloj(){

    // Haciendo uso del objeto Date() obtenemos la hora, minuto y segundo 
    var fechahora = new Date();
    var hora = fechahora.getHours(); 
    var minuto = fechahora.getMinutes(); 
    var segundo = fechahora.getSeconds(); 

    // Variable meridiano con el valor 'AM' 
    var meridiano = "AM";
    
    
    // Si la hora es igual a 0, declaramos la hora con el valor 12 
    if(hora == 0){

        hora = 12;
        
    }
    
    // Si la hora es mayor a 12, restamos la hora - 12 y mostramos la variable meridiano con el valor 'PM' 
    if(hora > 12) {

        hora = hora - 12;

        // Variable meridiano con el valor 'PM' 
        meridiano = "PM";

    }
    
    // Formateamos los ceros '0' del reloj 
    hora = (hora < 10) ? "0" + hora : hora;
    minuto = (minuto < 10) ? "0" + minuto : minuto;
    segundo = (segundo < 10) ? "0" + segundo : segundo;
    
    // Enviamos la hora a la vista HTML 
    var tiempo = hora + ":" + minuto + ":" + segundo + " " + meridiano;    
    document.getElementById("relojnumerico").innerText = tiempo;
    document.getElementById("relojnumerico").textContent = tiempo;

    // Cargamos el reloj a los 500 milisegundos 
    setTimeout(cargarReloj, 500);
    
}

// Ejecutamos la función 'CargarReloj' 
cargarReloj();

function cargarReloj(){

// Haciendo uso del objeto Date() obtenemos la hora, minuto y segundo

var fechahora = new Date();

var hora = fechahora.getHours();

var minuto = fechahora.getMinutes();

var segundo = fechahora.getSeconds();

// Variable meridiano con el valor 'AM'

var meridiano = "AM";

// Si la hora es igual a 0, declaramos la hora con el valor 12

if(hora == 0){

hora = 12;

}

// Si la hora es mayor a 12, restamos la hora - 12 y mostramos la variable meridiano con el valor 'PM'

if(hora > 12) {

hora = hora - 12;

// Variable meridiano con el valor 'PM'

meridiano = "PM";

}

// Formateamos los ceros '0' del reloj

hora = (hora < 10) ? "0" + hora : hora;

minuto = (minuto < 10) ? "0" + minuto : minuto;

segundo = (segundo < 10) ? "0" + segundo : segundo;

// Enviamos la hora a la vista HTML

var tiempo = hora + ":" + minuto + ":" + segundo + " " + meridiano;

document.getElementById("relojnumerico").innerText = tiempo;

document.getElementById("relojnumerico").textContent = tiempo;

// Cargamos el reloj a los 500 milisegundos

setTimeout(cargarReloj, 500);

}

// Ejecutamos la función 'CargarReloj'

cargarReloj();

Ahora le aplico unas propiedades CSS para darle un mejor aspecto.

CSS

A mi capa contenedora le puse el nombre de clase reloj, voy a usar ese nombre de clase para aplicarle las siguientes propiedades CSS darle un mejor aspecto al reloj.


.reloj {
    color: #0d1420;
    font-size: 120px;
    font-family: Arial;
    letter-spacing: 5px;
    text-align: center;
    background-color: #f7d06a;
    border: 10px solid #091321;
    border-radius: 20px;
}

.reloj {

color: #0d1420;

font-size: 120px;

font-family: Arial;

letter-spacing: 5px;

text-align: center;

background-color: #f7d06a;

border: 10px solid #091321;

border-radius: 20px;

}

Si voy al navegador, debería de verse el reloj de la siguiente manera.

El reloj corre y muestra la hora el minuto y segundo en tiempo real, al inicio de este tutorial he colocado una Demo en donde puedes ver el reloj en acción y también he colocado el código fuente en un repositorio GitHub para que lo puedas descargar.