Reloj de cuenta regresiva con jQuery

Cuenta regresiva jQuery, este código le permitirá crear una cuenta regresiva muy facilmente con solo jQuery , para ello muestra un reloj estilo antiguo con paletas que cambian sus números con el pasar de los segudos. Viene con una variedad de opciones y permite su uso basico y avanzado dependiendo lo que se necesite.



Uso Básico

$('#counter').countdown({startTime: "01:12:32:55"});

Uso completo:

$('#counter').countdown({
stepTime: 60,
format: 'hh:mm:ss',
startTime: "12:32:55",
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
timerEnd: function() { alert('end!!'); },
image: "digits.png"
});
Autor: Martin Conte Mac Donell - Fuente

Enlaces patrocinados:



Comentarios

Csar:
2011-09-13 02:09:18

Que bien se ve!

And3rz0n:
2012-01-20 21:01:25

Perdonen mi ignorancia, pero como lo uso?

Profesor Yeow:
2012-02-03 13:02:51

Fabulantastico!!! Te pasaste campeon!!
Voy a tratar de adaptarlo para que haga la cuenta regresiva pero a una feche, vere si lo puedo hacer, igualmente gracias por el ejemplo

mallory knox:
2012-04-01 04:04:28

not working in IE

Roberto:
2012-05-05 18:05:17

Saludos Me agrada mucho este cronometro de cuenta regresiva, pero francamente soy nuevo en esto de html y jquery, quisiera que me guies para poder implementar este cronometro en mi pagina... de ante mano muchisimas gracias. estoy usando html5

eKoh:
2012-08-08 00:08:35

buenas, quisiera saber como le podria cambiar, donde dice "Dias horas minutos segundos" porque mi publico es internacional, no solo hispano/español, gracias

R_MOOMIN:
2012-08-29 10:08:55

Hola, buen día.
perdón por mi ignorancia pero en donde
tengo que poner el código uso Dreamweaver
y no pasa nada perdonen por lo burro pero
apenas estoy aprendiendo, gracias por su
ayuda.

Boulala Hipster:
2012-09-22 14:09:07

NO me aparece en reloj

Francisco Muñoz:
2013-01-20 12:01:34

Seria ideal que como parte del proceso de descarga de este ejemplo tan genial incluyeras el archivo "digits.png" ya que este es requerido para la funcionalidad del pluging.

Aun así es un buen aporte. Gracias.

Andrés:
2013-01-31 10:01:25

Saludos. Revisando la cuenta regresiva, cada vez que actualizo la página la cuenta vuelve a empezar y ésto no lo haría funcional. Hay alguna manera de evitar que eso suceda??.

Muchas gracias por el aporte

nicolas penedo:
2013-02-10 14:02:50

Andres.. lo único que tendrías que hacer al momento de -->startTime: "12:32:55"<-- es setearle la fecha actual.. fijate si reemplazando por esto te funciona.

startTime: Date(),
o
startTime: new Date(),

Saludos!

Armando Jaleo:
2013-02-14 04:02:36

Hola! Os adjunto unos cambios para hacer una cuanta atrás con respecto a un día en concreto y reparación de un bug con los digitos cuando no lee el formato con una fecha autogenerada:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cuenta Atrás</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/jquery.countdown.js"></script>
<style type="text/css">
.cntSeparator {
color: #000000;
font-size: 54px;
margin: 10px 7px;
}
.desc {
margin: 7px 3px;
}
.desc div {
color: #000000;
float: left;
font-family: Arial;
font-size: 13px;
font-weight: bold;
margin-right: 65px;
width: 70px;
}
</style>
</head>
<body>
<div id="counter"></div>
<div class="desc">
<div>Días</div>
<div>Horas</div>
<div>Minutos</div>
<div>Segundos</div>
</div>
<script>
function get_time_difference(earlierDate, laterDate){
var nTotalDiff = laterDate.getTime() - earlierDate.getTime();
var oDiff = new Object();

oDiff.days = Math.floor(nTotalDiff/1000/60/60/24);
nTotalDiff -= oDiff.days*1000*60*60*24;

oDiff.hours = Math.floor(nTotalDiff/1000/60/60);
nTotalDiff -= oDiff.hours*1000*60*60;

oDiff.minutes = Math.floor(nTotalDiff/1000/60);
nTotalDiff -= oDiff.minutes*1000*60;

oDiff.seconds = Math.floor(nTotalDiff/1000);
return oDiff;

}
function use_time_difference(){
finish = new Date(2013, 02, 15, 11, 30, 00);
dateCurrent = new Date();
oDiff = get_time_difference(dateCurrent, finish);
oDiff.days<=9?days = '0'+oDiff.days: days = oDiff.days;
oDiff.hours<=9?hours = '0'+oDiff.hours: hours = oDiff.hours;
oDiff.minutes<=9?minutes = '0'+oDiff.minutes: minutes = oDiff.minutes;
oDiff.seconds<=9?seconds = '0'+oDiff.seconds: seconds = oDiff.seconds;
time = days + ":" + hours + ":" + minutes + ":" + seconds;
}
use_time_difference();
$('#counter').countdown({
stepTime: 60,
format: 'dd:hh:mm:ss',
startTime: time,
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
image: "img/digits.png"
});
</script>
</body>
</html>

Fuente: http://blogs.digitss.com/javascript/calculate-datetime-difference-simple-javascript-code-snippet/

Mery!!!:
2013-04-08 15:04:20

Esta chevere pero falta la imagen "digits.png"

francisco:
2013-04-24 11:04:26

hola me gusto este contador pero lo que necesito es progresivo para poner en mi web desde que esta online solo encuentro de dias online pero no como este decirles que ni idea de js, jquery
y todos lo que veo son regresivos espero me ayuden yevo
2 dias buscando por internet y no ay manera
gracias
francisco

Michael:
2013-05-07 22:05:19

Hola a todo@s, quisiera que me apoyen con un problema que tengo en este tema de cuenta regresiva con jquery, Lo que pasa es que yo descargue un recurso gratuito que encontre en internet que incluia este contador regresivo. Pero no funciona, siempre esta en 0 dias, 0 horas, 0 minutos, 0 segunos. Me pregunto como hacer para que esto funcione, aqui les dejo mi direccion web www.selvaconstructor.com para que vean a lo que me refiero. Y ademas comparto el archivo que tengo modificado por supuesto a mi necesidad.

http://www.4shared.com/zip/ErVEwJna/web_en_construccion.html

Apositos:
2013-05-18 18:05:04

Está de lujo, pero tengo un problema, no se si es porque algo he hecho mal, o me falta algo.
Pongo el contador con el día, la hora, minutos y segundos, funciona perfectamente, pero cuando vuelvo a ver el contador se reinicia, asi que la cuenta atras solo funciona si dejo abierto el documento toooooodo el rato hasta que acaba la cuenta.

Apositos:
2013-05-19 05:05:28

Vale he conseguido que no se reinicie usando el código de Armando Jaleo, ahora el problema es que pongo una fecha y la cuenta atras está mal, pongo la fecha de hoy y el contador me dice que faltan 30 días 20 horas.... cuando debería poner 0 días, de donde coge la fecha?, cómo puedo actualizar la fecha actual?.

Fredy:
2013-07-11 18:07:38

Cuando son más de 100 días los que quedan los segundos empiezan a descontarse en 99 en vez de 60.....hablo del código de Armando Jaleo

johan Cabeza:
2013-08-05 11:08:22

Hola como estan, quisiera saber como evitar que se reinicie el contador regresivo al actualizar la pagina en donde se encuentra.

Espero su pronta respuesta, gracias!

AGUSTÍN:
2013-11-24 01:11:22

BUENAS NOCHES. ME ENCANTARÍA APLICAR EL EFECTO DE TIEMPO DE RETROCESO PARA UNAPLANTILLA QUE SE ENVÍA POR EMAIL MASIVO. TE PIDO DE FAVOR TU APOYO Y SI EN DADO CASO ME APOYAS, ME GUSTARÍA PAGARTE POREL TIEMPO INVERTIDO. GRACIAS ANTICIPADAS. html.

Memo:
2014-04-25 23:04:49

y algún tuto meterlo a un gadget de blogger? no logro hacer que se muestre :/

Jordi:
2014-09-14 01:09:43

Un saludo y gracias por el importante aporte. De que forma hay que instalarlo y configurarlo en blogger por ejemplo ??? Gracias

Marc:
2015-01-29 03:01:47

Hola, he podido implementar el contador correctamente visualizando el código fuente que mostráis en el ejemplo. Sin embargo tengo un problema: necesito obtener el tiempo del contador para pasarlo por POST. ¿Cómo obtengo el tiempo del contador?

alberto:
2015-02-23 23:02:57

carge el relog en dreamweaver pero luego lo subi a mi sitio web pero el relog esta quieto ¿que hago?

Curiosito:
2015-03-29 19:03:22

Una pregunta, donde puedo poner ese codigo para que me pueda visualizar el reloj!!
por fa soy novato DDD:

alveghax:
2015-04-17 18:04:57

Buen día, esta es la dirección de la imagen digits.png
http://jquery-countdown.googlecode.com/svn/trunk/img/digits.png.

Gabriel:
2015-05-20 22:05:49

<script>
$('#counter').countdown({
stepTime: 60,
format: 'dd:hh:mm:ss',
startTime: "02:02:32:55",
digitImages: 6,
digitWidth: 53,
digitHeight: 77,
timerEnd: function() { alert('Fin del conteo regresivo!!'); },
image: "img/digits.png"
});
</script>

Chars:
2016-03-22 21:03:23

Amigo Armando Jaleo, aplique tu corrección sin embargo tengo retraso de un mes, no encuentro donde esta el desfase. Es decir para saber cuanto falta para mañana (23/03/2016 00:00) tengo que ponerlo con un mes antes (23/02/2016 00:00) ¿Sabes por qué?

Deje un Comentario
[Opcional]
(No se mostrará en el sitio)
[Opcional]
[Opcional]

Ultimos Comentarios

Data science course in hyderabad dijo:

Data is everywhere, which is growing exponentially globally, and this can still grow at an accelerating rate for the foreseeable ...

Erika dijo:

Esta muy chido.

Oscar V dijo:

Muy buen tutorial, el sitio da buena respuesta de las páginas web que uno chequea. Gracias por compartirlo ...

Doris Palencia dijo:

Podría hacer que mi página web sea una app para android?

Jose Valles dijo:

Hay alguna herramienta para desencriptar un MD5??

prueba dijo:

esto es una prueba

Hebert dijo:

Si, ejecuta muy bien. PERO no bloquea la pantalla cuando se hace una petición ajax desde un modal Bootstrap. ¿Alguna solución? ...

Hebert dijo:

Si, ejecuta muy bien. PERO no bloquea la pantalla cuando se hace una petición ajax desde un modal Bootstrap. ¿Alguna solución? ...

SyntaxHighlighter.config.stripBrs=true;