jueves, 11 de noviembre de 2010

Cuenta atrás en javaScript

Si tenéis la necesidad de realizar un contador de tiempo para una página web, se puede hacer en poco tiempo con jQuery y su plugin countdown

Los pasos a seguir vienen en la página de countdown, pero los resumo aquí rápidamente:
  1. Incluir el script de jquery (podéis poner lo que pongo a continuación o bajarlo a vuestro servidor):
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. Incluir el script de countdown y si se desea utilizar sus estilos, también el CSS:
    <style type="text/css">@import "jquery.countdown.css";</style> 
    <script type="text/javascript" src="jquery.countdown.js"></script>
  3. Aplicar el countdown o cuenta atrás a los elementos (div o span) que queramos:
    $(selector).countdown({until: liftoffTime});
En el último punto se le debe pasar como parámetro una fecha límite en la que el contador llegará a 0. También se le pueden pasar otros parámetros como el formato deseado de salida. Todo esto viene en la documentación del plugin.