Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Como hacer un cronómetro con jQuery
Actualizado el 11 Marzo, 2015 y leído 10,552 veces
Calificación: 10.00 / 10

Como hacer un cronómetro con jQuery

Anexsoft

Muchachos hoy vamos a enseñar algo muy simple la cual es crear un script que nos permita visualizar un cronómetro, este contendra botón de comienzo y fin.

Primero vamos a maquetar nuestro reloj, el cual es el siguiente:

Image title

Entonces nuestra lógica dice que cuando hagamos click en el boton comenzar, el cronómetro se dispare:

$(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.

Pueden ver una DEMO del ejemplo desde el siguiente enlace.

¡Adquiera ya!

  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

Últimas publicaciones

Encuesta

¿Cómo nos conociste?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.