jQuery CountDown Plugin
Podríamos utilizar el plugin jQuery Countdown por ejemplo para poner una página inicial con publicidad o condiciones de acceso que tras x tiempo se redirija al contenido de la Web.
Con lo que se va a explicar en este tutorial conseguiremos disponer de un script para realizar una cuenta atrás con efectos y tras finalizar dicha cuenta se realice alguna acción.
Será necesario incluir en nuestro <head> los scripts jquery necesarios:
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* delay function */
jQuery.fn.delay = function(time,func){
return this.each(function(){
setTimeout(func,time);
});
};
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() {
if(!to && to != settings.endNumber) { to = settings.startNumber; }
//set the countdown to the starting number
$(this).text(to).css('fontSize',settings.startFontSize);
//loopage
$(this).animate({
'fontSize': settings.endFontSize
},settings.duration,'',function() {
if(to > settings.endNumber + 1) {
$(this).css('fontSize',settings.startFontSize).text(to - 1).countDown(settings,to - 1);
}
else
{
settings.callBack(this);
}
});
});
};
$('#countdown').countDown({
startNumber: 10,
callBack: function(me) {
$(me).text('All done! This is where you give the reward!').css('color','#090');
}
});
});
</script>
Como vemos debemos incluir la librería básica de jQuery y las funciones que se encargarán de dar el efecto y realizar la cuenta atrás.
La clave del asunto está en la última parte del script:
$('#countdown').countDown({
startNumber: 10,
callBack: function(me) {
$(me).text('All done! This is where you give the reward!').css('color','#090');
}
});
Aquí es donde se realiza la función principal que es la de realizar la cuenta atrás y tras finalizar mostrar lo que sea necesario.
En el caso del ejemplo la cuenta atrás comienza en 10 y se irá decrementando hasta llegar a 0 y mostrar lo que contiene la función callBack.
Dentro de las etiquetas HTML simplemente deberemos tener algo como esto:
<span id="countdown"></span>
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
gracias lo andaba buscando
Muy buena herramienta sobretodo para mostrar anuncios y incrementar ingresos 🙂
Merely wanna remark that you have a very decent site, I like the design and style it actually stands out.
Jose Aguilar » jQuery CountDown Plugin I was suggested this website by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my problem. You’re wonderful! Thanks! your article about Jose Aguilar » jQuery CountDown PluginBest Regards Agata
Thanks for sharing superb informations. Your website is very cool. I’m impressed by the details that you have on this site. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for extra articles. You, my pal, ROCK! I found just the info I already searched all over the place and just couldn’t come across. What an ideal web site.
I have not checked in here for a while because I thought it was getting boring, but the last several posts are good quality so I guess I’ll add you back to my everyday bloglist. You deserve it my friend 🙂
I have been surfing online greater than 3 hours today, but I by no means found any fascinating article like yours. It is pretty price enough for me. Personally, if all webmasters and bloggers made good content as you probably did, the net shall be a lot more helpful than ever before. «I thank God for my handicaps, for through them, I have found myself, my work and my God.» by Hellen Keller.
I wish to show my appreciation to the writer just for rescuing me from such a crisis. Right after surfing around throughout the the web and obtaining tips which were not productive, I figured my entire life was over. Living without the presence of solutions to the difficulties you’ve sorted out through your entire blog post is a crucial case, and the kind that could have negatively affected my entire career if I hadn’t discovered your web page. Your expertise and kindness in touching every part was helpful. I am not sure what I would’ve done if I had not come upon such a subject like this. I can at this point relish my future. Thanks a lot very much for your high quality and results-oriented help. I won’t think twice to endorse the sites to any person who should get recommendations about this situation.