Probablemente, navegando por la red, has visitado sitios como RapidShare o Mega que te permiten descargar archivos, pero te hacen esperar un número específico de segundos antes de mostrarte el enlace de descarga. He creado un script similar, pero mi código te permite animar el tamaño de la fuente con el atributo CSS font-size a cada segundo para después, mostrar la recompensa al final.
Paso a explicaros como funcionaría este código. Se mostraría una cuenta atrás, en la cual, vosotros mismos podréis establecer el tiempo que queréis que se muestre, en la que, al avanzar, el texto de los segundos que restan irá cambiando conforme avanza el tiempo. Cuando el contador llegue a cero, se le mostrará un mensaje al usuario indicándole que ya puede recoger su recompensa.
El jQuery Javascript
Aquí tenéis el código a utilizar para implementar una cuenta atrás en tu página web:
jQuery.fn.countDown = function(settings,to) {
settings = jQuery.extend({
startFontSize: "36px",
endFontSize: "12px",
duration: 1000,
startNumber: 10,
endNumber: 0,
callBack: function() { }
}, settings);
return this.each(function() {
//¿Dónde empezamos?
if(!to && to != settings.endNumber) { to = settings.startNumber; }
//Establecemos la cuenta atrás con el numero inicial
jQuery(this).text(to).css("fontSize",settings.startFontSize);
//lo recorremos
jQuery(this).animate({
fontSize: settings.endFontSize
}, settings.duration, "", function() {
if(to > settings.endNumber + 1) {
jQuery(this).css("fontSize", settings.startFontSize).text(to - 1).countDown(settings, to - 1);
}
else {
settings.callBack(this);
}
});
});
};
Cómo utilizarlo
A continuación, te indicamos cómo utilizar el código que te hemos mostrado anteriormente. Para ello llamaremos a la función countdown que hemos implementado en el snippet anterior:
jQuery("#countdown").countDown({
startNumber: 10,
callBack: function(me) {
jQuery(me).text("¡Completado! Ya puedes recoger tu recompensa").css("color", "#090");
}
});
Y este ha sido el tutorial sobre cómo hacer una cuenta atrás en jQuery, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!