Mostrar tiempo transcurrido con jquery

Escrito por Luis Ruiz 27 de enero del 2011 a las 10:00Actualizado el 30 de noviembre del 2023 a las 20:18

Un plugin de jquery que me gusta bastante para utilizar como contador es “spriteTimer” , debido a que se puede configurar y personalizar fácilmente.

Lo estoy utilizando en un proyecto de cursos online como cronometro de cuenta atrás para finalizar un test. Pero por circunstancias de la vida, el planteamiento del proyecto cambio y necesitaba saber el tiempo que tardaba un alumno en realizar el test.

Después de ver el plugin no encontré la opción de sacar la información que necesitaba, así que decidí modificarlo, haciéndolo de la siguiente manera.

Añadimos el parámetro ‘getTimecallback’ en la configuración del plugin y en el le indicaremos a la función de javascript que tiene que pasarle el tiempo.

$(document).ready(function(){
  $('#contador').spriteTimer({
    'seconds': 60,
    'isCountDown': false, // true cuenta atrás
    'digitWidth': 18,
    'digitHeight': 25,
    'digitImagePath': 'js/spritetimer/numbers.png',
    'callback': timeFinished, // función a la que llamará una vez finalizado el tiempo
    'getTimecallback': showTime  // función a la que llamara para enviar el tiempo transcurrido
  });
});

showTime(v){
 alert('Tiempo que lleva:'+v);
}

En la variable «settings'» del plugin añadimos la función mencionada antes.

getTimecallback: function(){}

Añadimos un nuevo evento al plugin llamado «geTimer», para que envíe el tiempo transcurrido a la función indicada al instanciar el plugin.

timerElm.unbind().bind('resetTimer', function() {
  SpriteTimer.destroy();
  SpriteTimer.init();
}).bind('startTimer', function() {
  SpriteTimer.startTimer();
}).bind('stopTimer', function() {
  SpriteTimer.pauseTimer();
}).bind('getTimer', function() {
  settings.getTimecallback(SpriteTimer.currentSeconds-1);
});

Con esto ya tendríamos el plugin listo y para mostrar el texto solo tendríamos que llamarlo de la siguiente forma:

$( '#contador ').trigger(  'getTimer' );