Programación de un Reloj que Muestra la Hora Actual y se Actualiza Cada Segundo [SOLUCIONADO]

Desarrollo de un reloj en tiempo real

Si te encuentras en la búsqueda de cómo crear un reloj en tiempo real que muestra la hora actual y se actualiza cada segundo, has llegado al lugar correcto. En el siguiente artículo, encontrarás todo lo que necesitas saber para programar tu propio reloj dinámico haciendo uso del lenguaje de programación Javascript.

Para iniciar, ¿qué necesitamos? Básicamente sólo necesitaremos dos cosas: HTML para montar nuestra estructura base y Javascript para las funcionalidades del reloj. Sin embargo, esta vez nos centraremos en la funcionalidad con Javascript.

        <!-- Aquí va el HTML necesario para crear el elemento donde se mostrará la hora -->
        <div id="reloj"></div>
    

Una vez tenemos el HTML, podemos proceder a añadir la funcionalidad con Javascript. Lo primero que haremos será crear una función que se encargue de actualizar la hora cada segundo.

        function iniciarReloj() {
          let fecha = new Date();
          let horas = fecha.getHours();
          let minutos = fecha.getMinutes();
          let segundos = fecha.getSeconds();
          minutos = agregarCero(minutos);
          segundos = agregarCero(segundos);
          document.getElementById('reloj').innerHTML = horas + ":" + minutos + ":" + segundos;
          var t = setTimeout(iniciarReloj, 500);
        }

        function agregarCero(i) {
          if (i < 10) {i = "0" + i};
          return i;
        }
    

Como puedes ver, primero creamos la función iniciarReloj, dentro de la cual se genera una nueva fecha (esto lo hace el constructor Date()), y luego obtenemos la hora, los minutos y los segundos actuales. Añadimos la función agregarCero para asegurarnos de que siempre se muestren dos dígitos en los minutos y los segundos, incluso cuando son menores a 10. Finalmente, utilizamos el método setTimeout para que la función iniciarReloj se vuelva a llamar cada medio segundo, manteniendo así el reloj actualizado.

Ahora, solo hace falta llamar a la función iniciarReloj() cuando el contenido del documento se haya cargado por completo. Esto lo podemos lograr con el evento DOMContentLoaded.

        document.addEventListener('DOMContentLoaded', function() {
          iniciarReloj();
        });
    

Con estas sencillas líneas de código, ya tienes un reloj en tiempo real hecho con Javascript, cualidad importante para hacer de tu proyecto web interactivo y dínamico. Esperamos que esta guía haya sido útil y te invitamos a que explores más opciones y funcionalidades que puedes añadir a tu reloj. Con la programación, las posibilidades son infinitas.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad