Skip to main content
4 de 4
se añadieron 2 caracteres en el cuerpo
Ivan Botero
  • 6.8k
  • 10
  • 36
  • 57

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.


Ver ejemplo en linea

Ivan Botero
  • 6.8k
  • 10
  • 36
  • 57