Countdown Dashboard jQuery

En este artículo vamos a hablar de un plugin jQuery que muestra una cuenta regresiva o cuenta atrás muy fácil de utilizar y que aporta diferentes formas de usarlo.

La idea es que recibe unos parámetros de entrada que componen la fecha futura a la cual se quiere llegar y el script muestra los años, meses, semanas, dias, horas, minutos y segundos que quedan para llegar a dicha fecha.

Modificar su apariencia es muy sencillo si estás familiarizado con las hojas de estilo (CSS) y HTML.

Incorpora un javascript discreto y es compatible con jQuery, es decir, le podemos añadir sentencias extra como por ejemplo que sucederá cuando acabe la cuenta regresiva.

También incorpora las opciones de poder iniciar, detener y restablecer la cuenta atrás.

Se pueden tener múltiples instancias en la misma página pero lo que más me llama la atención es la posibilidad de añadir código extra en el evento tras completar la cuenta. Podríamos mostrar una alerta, ocultar la cuenta, ejecutar un ajax, entre otros en el evento OnComplete() como vemos a continuación:

<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
    $('#countdown_dashboard').countDown({
        targetDate: {
            'day':         13,
            'month':     6,
            'year':     2012,
            'hour':     15,
            'min':         14,
            'sec':         0
        },
        omitWeeks: true,
        onComplete: function() {
           alert('FIN DE LA CUENTA');
           $('#countdown_dashboard').hide();
        }
    });
});
</script>

En este caso cuando finaliza la cuenta regresiva, mostramos una alerta y escondemos la cuenta.

También podríamos ejecutar un ajax:

<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
    $('#countdown_dashboard').countDown({
        targetDate: {
            'day':         13,
            'month':     6,
            'year':     2012,
            'hour':     15,
            'min':         14,
            'sec':         0
        },
        omitWeeks: true,
        onComplete: function() {  
            $.ajax({
                type: "POST",
                url: "file.php",
                /*data: dataString,*/
                success: function(data) {
                    //$('#countdown_dashboard').remove();
                    $('#countdown_dashboard').html(data);
                }
            });            
        }
    });
});            
</script>

En este caso cuando finaliza la cuenta regresiva podemos hasta ejecutar un archivo php que puede enviar emails, modificar registros de una base de datos, editar archivos… y todo lo que se te pueda ocurrir depositando el resultado en el mismo lugar donde estaba la cuenta regresiva.

Puedes descargar el script en el siguiente link.

Ver ejemplo en funcionamiento