## Primer Error En tu código estas haciendo esto: while (h <= 23){ while (m <= 59) { while (s <= 59) { h++; } m++; } s++; } **¿Que ocurre?** Se va a repetir infinitamente, ya las iteraciones del tercer bucle no se detendrán ya que la variable evaluada `s` nunca aumenta realmente su valor. --- ## Primera Solución <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> h = 0; m = 0; s = 0; while (h <= 23) { while (m <= 59) { while (s <= 59) { s++; } m++; } h++; document.write(h + ":" + m + ":" + s); } <!-- language: lang-html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>reloj</title> </head> <body> <p>Reloj</p> </body> </html> <!-- end snippet --> ## Explicación Solo debes re-ordenar las variables que estas ejecutando en tus bucles, haciendo que cada una aumente realmente su valor. while (h <= 23) { while (m <= 59) { while (s <= 59) { s++; } m++; } h++; } --- ## Segundo Error No deberías usar `document.write()` para mostrar un texto que debería aparecer en un solo lugar, para hacer un reloj es mejor que hagas algo como esto: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> function mostrarHora() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); m = agregarCero(m); s = agregarCero(s); document.getElementById('reloj').innerHTML = h + ":" + m + ":" + s; var t = setTimeout(mostrarHora, 500); } /** * Agrega un 0 si el numero esta entre 0 y 9 */ function agregarCero(i) { if (i < 10) { i = "0" + i }; return i; } <!-- language: lang-html --> <body onload="mostrarHora()"> <div id="reloj"></div> </body> <!-- end snippet --> --- ## Explicacion Simplemente usamos la función `Date()` de Javascript y la llamamos recursivamente, haciendo que se genere un reloj, de modo que se obtengan los minutos y los segundos de manera continua y en un mismo lugar. --- # Actualizacion -> Usando Bucles ## Codigo <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> 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; } <!-- language: lang-html --> <div id="reloj"></div> <!-- end snippet --> --- ## Explicacion He usado las sentencias `await` y `async` de Javascript, las cuales de acuerdo a cierta [documentación][1]: > En lugar 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. --- ## [Ver ejemplo en linea][2] [1]: https://www.adictosaltrabajo.com/tutoriales/asyncawait-en-javascript/ [2]: https://jsfiddle.net/syra1rbb/5/