Actualizacion -> Usando Bucles
Codigo
async function iniciarReloj() {
/* Valores iniciales */
var hora = 0;
var minuto = 0;
var segundo = 0;
/* Contenedor del reloj */
var contenedor = document.getElementById("reloj");
/* Contenido del reloj */
var reloj;
while (hora <= 23) {
while (minuto <= 59) {
while (segundo <= 59) {
reloj = agregarCero(hora) + ":" + agregarCero(minuto) + ":" + agregarCero(segundo);
contenedor.innerHTML = reloj;
segundo++;
await sleep(1000);
}
minuto++;
segundo = 0;
}
hora++;
minuto = 0;
}
}
/* Iniciamos el reloj */
iniciarReloj();
/**
* Se encarga de realizar una pausa, por N milisegundos
*/
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
/**
* Agrega un 0 si el numero esta entre 0 y 9
*/
function agregarCero(i) {
if (i < 10) {
i = "0" + i
};
return i;
}
<div id="reloj"></div>
Explicacion
He usado las sentencias await
y async
de Javascript, las cuales de acuerdo a cierta documentacion:
En vez de tener que utilizar la respuesta de la primera petición en un incómodo then( function(){} ), usando la palabra especial await podemos usar getFilm() y getMain() como si devolvieran valores síncronos en vez de promesas.
Lo que nos da a entender que este tipo de modificadores esperaran al resultado de una funcion, es por ello que hemos agregado:
await sleep(1000);
Para que permite la espera de 1 segundo antes de continuar con cada una de las instrucciones.