Ejercicios de practica de JS

Ejercicios de práctica de JavaScript

Ejercicio F-7

Crear un reloj digital que muestre la hora en tiempo real (horas, minutos y segundos) en un sitio específico de la página web. El reloj debe actualizarse cada segundo y mostrar la hora con formato de dos dígitos para horas, minutos y segundos.

Crea una función llamada actReloj() que se encargue de obtener la hora actual utilizando el objeto Date().
Dentro de la función actReloj(), usa los métodos getHours(), getMinutes(), y getSeconds() para obtener los valores de hora, minutos y segundos.
Convierte los valores de hora, minutos y segundos en cadenas de dos dígitos. Si el valor es menor que 10, agrega un cero a la izquierda para mantener el formato de dos dígitos (por ejemplo, 8 debe convertirse en "08").
Construye una cadena HTML que muestre la hora con formato adecuado. Puedes usar etiquetas HTML para darle formato al texto, como para cambiar el tipo de letra y tamaño (por ejemplo, usar la fuente Arial y tamaño de letra 30px).
Coloca la cadena generada dentro de un bloque div en la página utilizando la propiedad innerHTML.
Configura un temporizador (setInterval) para llamar a la función actReloj() cada segundo (1000 milisegundos).
En el HTML de la página, agrega un contenedor con el id reloj, donde se mostrará la hora.
Asegúrate de que el reloj se inicie automáticamente cuando la página se cargue, vinculando el evento onload de la página con la función actReloj().

Lo resolví del siguiente modo:


        function actReloj(){

               let hhmmss = new Date();

                let horas = hhmmss.getHours();

                let minutos = hhmmss.getMinutes();

                let segundos = hhmmss.getSeconds();

                let lahora = "";

                // Convertimos los números a dos dígitos, o sea, 6 -> 06

                horas = (horas <= 9) ? ("0" + horas) : horas;

                minutos = (minutos <= 9) ? ("0" + minutos) : minutos;

                segundos = (segundos <= 9) ? ("0" + segundos) : segundos;  
      
                // Aquí construimos la cadena de texto HTML con la hora

                lahora = horas + ":" + minutos + ":" + segundos;

                let reloj = document.getElementById('reloj');

                reloj.innerHTML = lahora;

                // ejecuta la función cada segundo (1000 milisegundos)

                setTimeout("actReloj()", 1000);

        }

        window.onload = actReloj;

🕒 El reloj se actualizará automáticamente cada segundo.

Volver al inicio