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