Reloj Digital en JavaScript

Reloj Digital en JavaScript

Septimo proyecto de la guia 50 Proyectos de Programacion para Practicar y Aprender. Proyectos para Principiantes

Enlace Patrocinado

Respondent.io

Respondent.io es una plataforma en línea que conecta investigadores y empresas con participantes para estudios de mercado y encuestas remuneradas. Su objetivo es facilitar la recopilación de datos cualitativos y cuantitativos mediante entrevistas, encuestas y pruebas de usuario

Enunciado del proyecto

Este proyecto muestra un reloj digital que se actualiza en tiempo real cada segundo, mostrando la hora actual del sistema.

Código HTML, CSS y JavaScript

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Reloj Digital</title>
  <style>
    body {
      font-family: 'Courier New', monospace;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #111;
      color: #00ffcc;
    }
    #reloj {
      font-size: 60px;
      letter-spacing: 2px;
    }
  </style>
</head>
<body>

  <div id="reloj">00:00:00</div>

  <script>
    function actualizarReloj() {
      const ahora = new Date();
      let horas = ahora.getHours();
      let minutos = ahora.getMinutes();
      let segundos = ahora.getSeconds();

      // Añadir ceros delante si es necesario
      horas = horas < 10 ? "0" + horas : horas;
      minutos = minutos < 10 ? "0" + minutos : minutos;
      segundos = segundos < 10 ? "0" + segundos : segundos;

      const horaActual = horas + ":" + minutos + ":" +
 segundos;
      document.getElementById("reloj").innerText =
 horaActual;
    }

    // Actualizar cada segundo
    setInterval(actualizarReloj, 1000);
    // Llamada inicial para evitar 1 segundo de retraso
    actualizarReloj();
  </script>

</body>
</html>

Reloj Digital en JavaScript.

Explicación del Código

  • HTML: Se define un <div> con id reloj donde se mostrará la hora.
  • CSS: Se centra el reloj en pantalla con estilo digital (color neón y fuente monoespaciada).
  • JavaScript: La función actualizarReloj() obtiene la hora actual, le da formato y actualiza el contenido del div cada segundo usando setInterval().

Indice de la guia de proyectos

50 Proyectos de Programacion

Proyecto anterior

Contador de Palabras en JavaScript