2

Hola estoy buscando hacer un reloj que imprima la hora, minutos y segundos con un bucle while e insertarlo en una tabla. Estoy recién en esto, y no me doy mucha idea de como hacerlo. agradecería mucho si que me prestaran una ayuda.

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

<body>

  <table width="200" border="1">

  <tbody>

  <tr>
    <th>Horas</th>
    <th>Minutos</th>
    <th>Segundos</th>
  </tr>

  </thead>

  <tbody id="resultado">
  </tbody>

  </table>


<script type="text/javascript">

var a = "";
var h = 0;
var m = 0;
var s = 0;

a += "<tr>"
+ "<td>" + h + "</td>"
+ "<td>" + m + "</td>"
+ "<td>" + s + "</td>"
+ "</tr>";


while(h < 24){ 
    h++; 

while(m < 60){ 
    m++;

while(s < 60){ 
    s++;
document.getElementById("resultado").innerHTML = a;
}

}
</script>

</body>
</html>
1
  • Tienes un par de errores en tu codigo, como llaves para cerrar los while, tambien etiquetas sin etiquetas de cierre, de igual forma, echale un ojo a este ejemplo seguro te sirve, ejemplo Commented el 5 ago. 2017 a las 2:03

2 respuestas 2

2

Creo que esto te puede servir:

var h = 0;
var m = 0;
var s = 0;
const hora = document.getElementById("hora");
const minutos = document.getElementById("minutos");
const segundos = document.getElementById("segundos");
minutos.textContent = m;
hora.textContent = h;
segundos.textContent = s;

setInterval(function(){
  if (s === 59){
    s = -1; // Para que al final del bloque termine siendo 0
    m++;
    minutos.textContent = m;
  }
  if (m === 60){
    m = 0;
    h++;
    hora.textContent = h;
    minutos.textContent = m;
  }
  if(h === 24){
    h = 0;
    hora.textContent = h;
  }
  s++;
  segundos.textContent = s;
}, 1000);
  <table width="200" border="1">

  <tbody>

  <tr>
    <th>Horas</th>
    <th>Minutos</th>
    <th>Segundos</th>
  </tr>

  </thead>

  <tbody id="resultado">
    <tr>
      <td id="hora"></td>
      <td id="minutos"></td>
      <td id="segundos"></td>
    </tr>
  </tbody>

  </table>

En este caso tener en la variable a la fila y las celdas es poco conveniente pues cada vez se "crea" la tabla, mejor es crearla desde HTML y reescribirla en JS, para eso ocupas el textContent.

Luego con setInterval creas un intervalo que ejecuta la función cada x tiempo en milisegundos, así:

setInterval(función, x);

Si quieres hacerlo con la fecha actual podrías instanciar un objeto de la clase Date() y obtener las horas, minutos y segundos. Justo como a continuación:

  //Obtener variables
var fecha = new Date();
var h = fecha.getHours();
var m = fecha.getMinutes();
var s = fecha.getSeconds();
  //Obtener los elementos a sobreescribir
const hora = document.getElementById("hora");
const minutos = document.getElementById("minutos");
const segundos = document.getElementById("segundos");
  //Imprimir lo primero
minutos.textContent = m;
hora.textContent = h;
segundos.textContent = s;

setInterval(function(){
  if (s === 59){
    s = -1; // Para que al final del código termine siendo 0
    m++;
    minutos.textContent = m;
  }
  if (m === 60){
    m = 0;
    h++;
    hora.textContent = h;
    minutos.textContent = m;
  }
  if(h === 24){
    h = 0;
    hora.textContent = h;
  }
  s++;
  segundos.textContent = s;
}, 1000);
  <table width="200" border="1">

  <tbody>

  <tr>
    <th>Horas</th>
    <th>Minutos</th>
    <th>Segundos</th>
  </tr>

  </thead>

  <tbody id="resultado">
    <tr>
      <td id="hora"></td>
      <td id="minutos"></td>
      <td id="segundos"></td>
    </tr>
  </tbody>

  </table>

2
  • 1
    setInterval no asegura que se ejecute exactamente cada 1000 ms (cómo es en tu caso), lo mejor sería consultar el tiempo con new Date() en milisegundos y esto consultarlo cada un milisegundo que es el mínimo que soporta setInterval, o mejor aún crear un evento que este atento cada vez que aumenta en un segundo la hora.
    – lromeraj
    Commented el 5 ago. 2017 a las 10:45
  • Exacto, puse ese ejemplo porque era el que más se parecía a lo que mati puso en la pregunta, pues va empezando y siento que no va tanto enfocado a mostrar exacta la hora ni a intervalos o así, sino más bien va enfocado a la resolución del problema con contadores y condicionales, por ello no quise extenderme a soluciones como las que planteas @Javi, que de hecho son mejores.
    – ben
    Commented el 6 ago. 2017 a las 23:59
0

Como en la otra respuesta una solución sin while, pero rápida y mínima, con layout de tabla y un poco de CSS (fiddle):

<!DOCTYPE html>
<html lang="es">
<head>
<title>Reloj</title>
<style>
table,td{border:1px solid #000}
td{padding:15px;width:45px;text-align:right}
</style>
<script>
<!--
function miReloj() {//
  let data=new Date(),
    hh=data.getHours(),
    mi=data.getMinutes(),
    ss=data.getSeconds();
  document.getElementById("relojh").innerText=hh;
  document.getElementById("relojm").innerText=mi;
  document.getElementById("relojs").innerText=ss;
  window.setTimeout("miReloj()", 1000);
}
//-->
</script>
</head>

<body onload="miReloj()">
<table>
<tr>
  <td><span id="relojh"></span></td>
  <td><span id="relojm"></span></td>
  <td><span id="relojs"></span></td>
</td>
</table>
</body>
</html>

Lo siento pero solo hablo italiano y utilicé el traductor de Google :)

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.