Reloj simple de JavaScript

Existen numerosos ejemplos de cómo implementar un reloj con JavaScript, y aunque los enfoques pueden variar ligeramente, la mayoría sigue una idea similar. Normalmente, esta funcionalidad se construye utilizando funciones de temporización como setTimeout o setInterval, que permiten que la interfaz actualice la hora mostrada a intervalos regulares.

Si bien la lógica detrás de un reloj simple no es muy compleja, es un excelente ejercicio práctico para comprender cómo funciona el objeto Date en JavaScript. Al crear un reloj desde cero, se puede aprender a obtener la hora actual, formatear horas, minutos y segundos, y actualizar la interfaz de usuario dinámicamente sin recargar la página.

En este ejemplo, crearemos un reloj digital simple en formato de 24 horas utilizando la función setTimeout. Este enfoque ofrece mayor control sobre el ciclo de actualización y puede ser ligeramente más flexible que setInterval. Durante el proceso, también nos ocuparemos de tareas básicas de formato, como añadir ceros a la izquierda a los valores de un solo dígito, para que la hora se muestre en un formato limpio y coherente.

HTML

<div id="clock"></div>

JavaScript

function clock() {

  const date = new Date();

  let hours = date.getHours(),
    minutes = date.getMinutes(),
    seconds = date.getSeconds();

  if (hours < 10) hours = '0' + hours;
  if (minutes < 10) minutes = '0' + minutes;
  if (seconds < 10) seconds = '0' + seconds;

  const time = hours + ':' + minutes + ':' + seconds;

  document.getElementById('clock').innerText = time;

  setTimeout(() => {
    clock();
  }, 1000);
}

clock();

Puedes ver un ejemplo en Codepen: https://codepen.io/igorrybalko/pen/wBwzKeE