Micaela 1 de Enero de 2009 a las 09.00
   Imprimir artículo
elWebmaster.com

Cuenta regresiva al estilo RapidShare con MooTools


Internet se encuentra llena de sitios web que poseen cuentas regresivas, como RapidShare, que hacen que tengamos que esperar una cierta cantidad de tiempo antes de presentarnos el contenido de la web.

Si est√°s buscando una forma sencilla de crear una de estas cuentas regresivas puedes realizarlo mediante el CountDown plugin basado en MooTools que nos traen desde el sitio web de David Walsh.

El javascript Mootools es:

1.    var CountDown = new Class({
2.
3.        //implements
4.        Implements: [Options,Events],
5.
6.        //options
7.        options: {
8.¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬† element: ‘countdown’,
9.            start: 10,
10.            finish: 0,
11.¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬† startFont: ‘36px’,
12.¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬† finishFont: ‘12px’,
13.            onComplete: $empty,
14.            duration: 1000
15.        },
16.
17.        //initialization
18.        initialize: function(options) {
19.            //set options
20.            this.setOptions(options);
21.        },
22.
23.        //get things started
24.        start: function() {
25.            this.anim();
26.        },
27.
28.        //animate!
29.        anim: function() {
30.¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬† this.options.element.set(’text’,this.options.start–);
31.            var fx = new Fx.Tween(this.options.element,{
32.                duration: this.options.duration,
33.¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† link: ‘ignore’,
34.                onComplete: function() {
35.                    if(this.options.start >= this.options.finish) {
36.                        this.anim();
37.                    } else {
38.¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† this.fireEvent(’complete’);
39.                    }
40.                }.bind(this)
41.¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬† }).start(’font-size’,this.options.startFont,this.options.finishFont);
42.        }
43.    });
44.
45.    /* usage */
46.¬†¬†¬† window.addEvent(’domready’,function() {
47.        var cd = new CountDown({
48.¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬† element: $(’countdown’),
49.            start: 12,
50.            finish: 0,
51.            onComplete: function() {
52.¬†¬†¬† ¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬† this.options.element.set(’text’,'Done! Your special code is: ‘).setStyle(’color’,'#090′);
53.            }
54.        }).start();
55.    });

La clase CountDown nos permite personalizar nuestra cuenta regresiva:

‚Äʬ†¬†¬† element: Es el elemento que va a contener el texto de la cuenta regresiva.
‚Äʬ†¬†¬† start: El n√ļmero en que comienza. (por defecto es 10)
‚Äʬ†¬†¬† finish: El n√ļmero en que finaliza. (por defecto es 0)
‚Äʬ†¬†¬† duration: La duraci√≥n entre cada n√ļmero (por defecto es un segundo)
‚Äʬ†¬†¬† startFont: El tama√Īo de fuente que tiene el texto con que comienza.
‚Äʬ†¬†¬† finishFont: El tama√Īo de fuente que tiene el texto con que finaliza.

Fuente: David Walsh Blog


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (2)

  1. Mario Espinosa dice:

    Estas cuentas regresivas para los usuarios pueden ser restrictivas pero para los servidores son veneficas pues das tiempo para evitar el colapso del mismo por tantas conecciones muchas gracias David Walsh por generar estas rtestricciones pronto las impementare en mis sitios de prueva.

  2. Agustin dice:

    ¬ŅQui√©n *#@”!!! invent√≥ esas malditas cuentas regresivas para las descargas? el que lo invento deber√≠an fusilarlo. MALDITO CAPITALISTA.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Iniciar sesión