Crear un reloj simple con JavaScript

Puedes crear un reloj digital simple utilizando HTML, CSS y JavaScript.

Aquí tienes un ejemplo básico de cómo hacerlo:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Reloj con JavaScript</title>
  <style>
    #clock {
      font-size: 3em;
      text-align: center;
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <div id="clock"></div>
  
  <script>
    function displayTime() {
      const clock = document.getElementById('clock');
      const currentTime = new Date();
      const hours = currentTime.getHours();
      const minutes = currentTime.getMinutes();
      const seconds = currentTime.getSeconds();
      const timeString = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      clock.textContent = timeString;
    }

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

    // Mostrar la hora al cargar la página
    displayTime();
  </script>
</body>
</html>

En este código, se usa HTML para crear un contenedor <div> con el ID «clock», donde se mostrará la hora. Luego, se aplica un poco de CSS para darle formato.

JavaScript se encarga de obtener la hora actual y actualizar el reloj cada segundo. La función displayTime obtiene la hora actual con la ayuda de new Date() y luego muestra las horas, minutos y segundos en el formato HH:MM:SS en el elemento con el ID «clock».

El setInterval se utiliza para llamar a la función displayTime cada segundo (1000 milisegundos), manteniendo actualizado el reloj. Además, se llama a displayTime una vez al inicio para mostrar la hora actual en el momento de carga de la página.

Puedes modificar el código y estilos para personalizar el diseño del reloj según tus preferencias.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies