Como hacer un relog con Html5 y javascript

Cómo Crear un Reloj Digital con JavaScript

Aprende a construir un reloj en tiempo real paso a paso

¿Qué vamos a crear?

Vamos a crear un reloj digital que muestre la hora actual en formato de 12 o 24 horas. Este reloj se actualiza automáticamente cada segundo usando JavaScript puro.

Conceptos que aprenderás:

Manipulación del DOM
Uso del objeto Date() de JavaScript
Función setInterval() para actualización continua
Formateo de números con padStart()

Vista Previa

              00:00:00
            

Código HTML

<!-- Contenedor del reloj -->
<div class="text-center bg-dark p-5">
  <div id="reloj" style="font-size: 3rem; font-weight: bold; color: #00ff00; font-family: 'Courier New', monospace;">
    00:00:00
  </div>
</div>

Código JavaScript

<script>
function actualizarReloj() {
  // Obtener la fecha y hora actual
  const ahora = new Date();
  
  // Extraer horas, minutos y segundos
  let horas = ahora.getHours();
  let minutos = ahora.getMinutes();
  let segundos = ahora.getSeconds();
  
  // Agregar cero al inicio si es menor a 10
  horas = horas.toString().padStart(2, '0');
  minutos = minutos.toString().padStart(2, '0');
  segundos = segundos.toString().padStart(2, '0');
  
  // Formatear la hora
  const horaFormateada = `${horas}:${minutos}:${segundos}`;
  
  // Actualizar el contenido del reloj
  document.getElementById('reloj').textContent = horaFormateada;
}

// Actualizar el reloj cada segundo (1000 milisegundos)
setInterval(actualizarReloj, 1000);

// Llamar la función inmediatamente al cargar
actualizarReloj();
</script>

Código Completo (Copiar y Pegar)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reloj Digital</title>
</head>
<body>
  <!-- Contenedor del reloj -->
  <div class="text-center bg-dark p-5">
    <div id="reloj" style="font-size: 3rem; font-weight: bold; color: #00ff00; font-family: 'Courier New', monospace;">
      00:00:00
    </div>
  </div>

  <script>
    function actualizarReloj() {
      const ahora = new Date();
      let horas = ahora.getHours();
      let minutos = ahora.getMinutes();
      let segundos = ahora.getSeconds();
      
      horas = horas.toString().padStart(2, '0');
      minutos = minutos.toString().padStart(2, '0');
      segundos = segundos.toString().padStart(2, '0');
      
      const horaFormateada = `${horas}:${minutos}:${segundos}`;
      document.getElementById('reloj').textContent = horaFormateada;
    }

    setInterval(actualizarReloj, 1000);
    actualizarReloj();
  </script>
</body>
</html>

¡Tip adicional!

Puedes personalizar el reloj cambiando los colores, el tamaño de fuente, o incluso agregando formato AM/PM. ¡Experimenta con el código y hazlo tuyo!