En esta entrada vamos a crear un cronómetro usando jQuery y un poco nuestro ingenio. El resultado debería verse como la imagen a continuación.
$(document).ready(function(){
var tiempo = {
hora: 0,
minuto: 0,
segundo: 0
};
var tiempo_corriendo = null;
$("#btn-comenzar").click(function(){
if ( $(this).text() == 'Comenzar' )
{
$(this).text('Detener');
tiempo_corriendo = setInterval(function(){
// Segundos
tiempo.segundo++;
if(tiempo.segundo >= 60)
{
tiempo.segundo = 0;
tiempo.minuto++;
}
// Minutos
if(tiempo.minuto >= 60)
{
tiempo.minuto = 0;
tiempo.hora++;
}
$("#hour").text(tiempo.hora < 10 ? '0' + tiempo.hora : tiempo.hora);
$("#minute").text(tiempo.minuto < 10 ? '0' + tiempo.minuto : tiempo.minuto);
$("#second").text(tiempo.segundo < 10 ? '0' + tiempo.segundo : tiempo.segundo);
}, 1000);
}
else
{
$(this).text('Comenzar');
clearInterval(tiempo_corriendo);
}
})
})
El algoritmo es bastante sencillo, declaramos un objeto con indices que contendran la hora/minuto/segundo del tiempo transcurrido el cual es calculado mediante el SetInterval.