Como hacer un cronómetro con jQuery

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.