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
h = 0;
m = 0;
s = 0;
while (h <= 23) {
while (m <= 59) {
while (s <= 59) {
s++;
}
m++;
}
h++;
document.write(h + ":" + m + ":" + s);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reloj</title>
</head>
<body>
<p>Reloj</p>
</body>
</html>
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:
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;
}
<body onload="mostrarHora()">
<div id="reloj"></div>
</body>
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
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 documentación:
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.