[Jquery] CountDown - Cuenta Regresiva

Uno de los muchas utilidades en paginas web podría ser la cuenta regresiva, por que cuando la pagina o un proyecto, tiene una fecha limite, puedes poner una cuenta regresiva donde diga que falta tanto tiempo para terminar...

Para ello existen muchas librerías que nos simplifican mucho el proceso en este caso usaremos una llamada countdown.js que nos ayudara en este caso...

Todo esto es una referencia de la pagina TutPlus solo que acortaremos y dejaremos los estilos por que se ven bien.

Entonces empezamos.... Aquí tenemos el código de countdown.js:

Script

(function($) {

$.fn.countdown = function(options, callback) {

//Selector personalizado 'this'

thisEl = $(this);

//vector para las configuraciones

var settings = { 

'date': null,

'format': null

};

//añade las configuraciones al vector de opciones

if(options) {

$.extend(settings, options);

}

//funcion principal countdown 

function countdown_proc() {

eventDate = Date.parse(settings['date']) / 1000;

currentDate = Math.floor($.now() / 1000);

if(eventDate <= currentDate) {

callback.call(this);

clearInterval(interval);

}

seconds = eventDate - currentDate;

days = Math.floor(seconds / (60 * 60 * 24)); //Calcula el numero de dias

seconds -= days * 60 * 60 * 24; //Actualiza la variable segundos con el numero de dias eliminados

hours = Math.floor(seconds / (60 * 60));

seconds -= hours * 60 * 60; //Actualiza la variable segundos con el numero de dias eliminadas

minutes = Math.floor(seconds / 60);

seconds -= minutes * 60; //Actualiza la variable segundos con el numero de minutos eliminados

//Condicional para mostrar el texto

if (days == 1) { thisEl.find(".timeRefDays").text("Dia"); } else { thisEl.find(".timeRefDays").text("Dias"); }

if (hours == 1) { thisEl.find(".timeRefHours").text("Hora"); } else { thisEl.find(".timeRefHours").text("Horas"); }

if (minutes == 1) { thisEl.find(".timeRefMinutes").text("Minuto"); } else { thisEl.find(".timeRefMinutes").text("Minutos"); }

if (seconds == 1) { thisEl.find(".timeRefSeconds").text("Segundo"); } else { thisEl.find(".timeRefSeconds").text("Segundos"); }

//Logica para los dos digitos cuando la configuracion esta en "ON" activada

if(settings['format'] == "on") {

days = (String(days).length >= 2) ? days : "0" + days;

hours = (String(hours).length >= 2) ? hours : "0" + hours;

minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;

seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;

}

//Actualizar el countdown's los valores HTML.

if(!isNaN(eventDate)) {

thisEl.find(".days").text(days);

thisEl.find(".hours").text(hours);

thisEl.find(".minutes").text(minutes);

thisEl.find(".seconds").text(seconds);

} else { 

alert("Fecha invalida. Aqui tienes un ejemplo: 12 Tuesday 2012 17:30:00");

clearInterval(interval); 

}

}

//Corremos la funcion

countdown_proc();

//Hacemos que se ejecute cada segundo

interval = setInterval(countdown_proc, 1000);

}

}) (jQuery);

Si vemos claramente lo mas importante de este script es que tenemos dos opciones en la configuracion la cual es date (Aqui especificaremos la fecha limite) y format (para que tenga dos digitos), despues de eso se ejecuta el coundown obteniendo la fecha y actualizandola cada segundo agregando el texto segun sea dia(s), hora(s), minuto(s), segundo(s)...

Los estilos.css:

Estilos

/* ---------- LAYOUT ---------- */

.timer-area {

  background: transparent url('area_patron.png') left top;

  text-align: center;

  padding-top: 2em;

  margin-bottom: 4em;

}

.timer-area h1 {

  color: white;

}

/* ---------- TIMER ---------- */

ul#countdown li {

  display: inline-block;

  background: transparent url('pieza_tiempo.png') no-repeat left top;

  width: 104px;

  margin-bottom: 4em;

  text-align: center;

}

ul#countdown li span {

  font-size: 3em;

  font-weight: bold;

  color: #1f2225;

  height: 108px;

  line-height: 108px;

  position: relative;

}

ul#countdown li span::before {

  content: '';

  width: 100%;

  height: 1px;

  border-top: 1px solid white;

  position: absolute;

  top: 31px;

}

ul#countdown li p.timeRefDays,

ul#countdown li p.timeRefHours,

ul#countdown li p.timeRefMinutes,

ul#countdown li p.timeRefSeconds {

  margin-top: 1em;

  color: #909091;

  text-transform: uppercase;

  font-size: .875em;

}

Con estos estilos le damos a la clase timer-area su imagen de fondo su posicionamiento y color de letra... Y en los estilos del identificador countdown le damos un tamaño de letra, su fondo, tamaño a su fondo, posicionamiento, al igual que a sus clases para días, horas, minutos, segundos que escribimos con el countdown.js le damos su estilo...

las imágenes que hacen falta son estas dos:

area_patron.png es esa imagen pequeña negra que tiene un patron... y pieza_tiempo.png es la parte blanca donde se mostrara el tiempo...

Llamando a nuestro archivo y aplicando los estilos en HTML

Primero llamaremos a los estilos, al jquery la ultima version, y al script countdown que funciona gracias a jquery...

Ahora escribimos nuestro Jquery para hacer funcionar nuestro countdown, lo único que en este caso les gustaría modificar a ustedes seria la fecha (date) que debe estar en ingles, esa seria la fecha limite...

Por ultimo agregamos nuestro HTML con nuestras clases para que se apliquen nuestros estilos...

Con eso tendrías algo como lo siguiente:

Todo el estilo es modificable....

Bueno todo esto es obra de tutplus solo que esto seria como una "version en español", pero si quieren una referencia completa pero en ingles pueden ver la referencia :P

Les dejo los archivos para que los puedan descargar y usar: http://www.mediafire.com/download/yzirt5ne23mmsci/modificada.zip

Espero que esto les sea de utilidad y lo puedan usar en sus proyectos.

Referencia: http://webdesign.tutsplus.com/tutorials/complete-websites/adding-a-jquery-countdown-plugin-to-our-coming-soon-page/