I think this can help you:
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>
In this case having the variable a
the row and the cells is not convenient because every time the table is "created", it is better to create it from HTML and rewrite it in JS, for that you occupy the textContent
.
Then with setInterval
you create an interval that executes the function every x time in milliseconds, like this:
setInterval(función, x);
If you want to do it with the current date you could instantiate an object of class Date()
and get the hours, minutes and seconds. Just like below:
//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>