2

Estoy intentando crear un reloj a partir de bucles while anidados pero no lo he logrado hasta ahora

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>reloj</title>
</head>

<body>
    <p>Reloj</p>
    <script type="text/javascript">
        h = 0;
        m = 0;
        s = 0;
        while (h <= 23) {
            while (m <= 59) {
                while (s <= 59) {

                    h++;
                }
                m++;
            }
            s++;
            document.write(h + ":" + m + ":" + s);
        }
    </script>

</body>

</html>

Lo he editado ahora hasta donde he logrado realizar:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reloj</title>
</head>
<body>
<table border 1px solid black>
<tr>
<th>Horas</th>
<th>Minutos</th>
<th>Segundos</th>
</tr>
</table>

<script type="text/javascript">

var vueltash = 0;
var vueltasm = 0;
var vueltass = 0;
var a = "";
h = 0;
m = 0;
s = 0;

while (vueltash <= 23) {
while (vueltasm <= 59) {
while (vueltass <= 59) {

a = "<table border 1px solid black"
+ "<tr>"
+ "<td>" + vueltash + ":" + vueltasm + ":" + vueltass + "<td>"
+ "</tr>"
+ "</table>";
document.write(a);

vueltass++;
}
vueltasm++;
}
vueltash++;
}
</script>

</body>

Luego de crear el bucle, tengo que insertar el reloj en una tabla, Estoy complicado porque solo puedo utilizar bucles while

12
  • Un reloj o un cronometro? Commented el 12 ago. 2017 a las 4:16
  • un reloj, luego lo insertare en una tabla con filas y columnas
    – condor12
    Commented el 12 ago. 2017 a las 4:39
  • De acuerdo, has visto lo que te he mostrado en mi respuesta? Commented el 12 ago. 2017 a las 4:40
  • si, ahora mismo estoy tratando de entenderlo
    – condor12
    Commented el 12 ago. 2017 a las 4:41
  • Vale, espero te sirva, de igual forma estoy aca por si tienes dudas Commented el 12 ago. 2017 a las 4:42

1 respuesta 1

8

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.