Si les gusta el desarrollo web seguro que conocen el framework de javascript jQuery. Personalmente yo comencé mis primeros desarrollos usando otros frameworks disponibles (sobre todo mootools) pero debido a la popularidad de jQuery y su integración en sistemas como WordPress o Drupal he tenido que adaptarme a esta biblioteca.

A pesar de que jQuery tiene una muy buena documentación comparado con otros proyectos, en su momento eché en falta la información sobre como desarrollar un plugin básico para jQuery explicado de forma sencilla. Así que he desarrollado un pequeño plugin a modo de ejemplo para intentar solucionar las dudas iniciales que puedes tener. Para ello vamos a programar un flip clock:

Lo primero que necesitamos es crear un nuevo fichero que llamaremos jquery.flipclock.js. Editamos el archivo y escribimos la estructura básica del plugin:

En este plugin necesitaremos llevar una serie de variables y opciones generales, así que definiremos unos valores por defecto al comienzo de la función flipclock:

Tras esto añadimos las funciones necesarias. En este plugin necesitamos dos: una para construir el reloj y otra para mostrar la barra de información.

La función que contruye el reloj básicamente lo que hace es obtener la fecha y generar dinámicamente el código HTML que se visualizará en la página. Tendrá en cuenta la opción de formato (ampm) para construir la hora en formato corto AM/PM o largo (24H):

La función que construye la barra de información tan solo muestra un mensaje predefinido y activa un enlace para cambiar el formato de la hora:

Finalmente nos quedaría la llamada principal del plugin. Esta llamada se encarga de llamar a las otras funciones y generar un temporizador para que se actualice el reloj.

Con nuestro plugin finalizado tan solo nos queda declarar la llamada en la página web. En este caso necesitamos llamar al plugin desde un elemento en el cual se construirá el reloj: index.html

Como pueden comprobar, en la llamada se pueden pasar los valores de las opciones que queremos que se sobreescriban.

Tan solo nos queda aplicar un poco de CSS al HTML generado para darle un toque más atractivo.

Puedes ver un ejemplo Online en: http://nochesdecode.com.ar/dev/flipclock/

Descarga: FlipClock.rar

2 comentarios en “FlipClock – Reloj contador de tiempo en jQuery

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *