jQuery Countdown
jQuery Countdown nos permite insertar cuentas regresivas en varios formatos con pocas líneas de código.
Simplemente deberemos insertar en nuestro <head> los estilos y scripts necesarios:
<link type="text/css" href="jquery.countdown.css" rel="stylesheet" />
<style type="text/css">
.defaultCountdown { width: 240px; height: 45px; float:left; }
</style>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="jquery.countdown.js"></script>
<script type="text/javascript" src="jquery.countdown-es.js"></script>
<script type="text/javascript">
$(function () {
var austDay = new Date();
date_end1 = new Date(2012, 6 - 1, 7, 19, 30, 35);
date_end2 = new Date(2012, 9 - 1, 10);
$('#defaultCountdown1').countdown({until: date_end1});
$('#defaultCountdown2').countdown({until: date_end2});
});
</script>
En el caso de este ejemplo vamos a tener 2 cuentas regresivas para verificar que en una aplicación se podría tener varios eventos por cumplirse independientemente.
Como puedes observar a la función date le podemos pasar distintos parámetros (año, mes, dia, hora, minuto, segundos y milisegundos).
El único parámetro que tiene una pequeña particularidad es el mes que se le debe restar 1 debido a que los meses empiezan en 0. Es decir, el mes de enero es el 0 y así sucesivamente.
Y en el <body>:
<div id="defaultCountdown1"></div> <br/><br/> <div id="defaultCountdown2"></div>
Tenemos dos contenedores con identificador único donde añadimos cada uno de las cuentas regresivas.
En la imagen anterior muestra uno de los estilos por defecto, se puede elegir otro estilo o editar al gusto modificando el archivo «jquery.countdown.css» que viene en el paquete de descarga.
Debo decir que incluye un script en distintos idiomas, en el caso del ejemplo hemos habilitado el español añadiendo en nuestro <head> el script «jquery.countdown-es.js».
El script te lo puedes descargar de su página oficial. Además de que verás distintos ejemplos y más documentación.
Autor
¿Buscas trabajo de programador?
4 respuestas a “jQuery Countdown”
Deja una respuesta
11 artículos que te podrían interesar
Ver más sobre
Hola José buen día tengo un tema con un contador quisiera ver si me puedes apoyar es este
http://www.businessense.com.mx/landing/
no logro cambiar la fecha no encuentro donde es te lo agradeceria
Hola,
Pues no se si se trata del mismo plugin. Si es así tan solo tienes que buscar la llamada al plugin jQuery Countdown y cambiar el parámetro «until».
Saludos
Estimado Jose:
Me gustó bastante este plugin ya que necesito un cronometo para mi proyecto pero tengo una duda , es posible agregarle alguna variable php a este script o existe algun método para registrar el tiempo transcurrido?
Saludos
Si, tu le puedes pasar el tiempo recogido de una base de datos por ejemplo pero se lo tienes que pasar formateado, es decir, como te lo pide el plugin.