Epiclock

Epiclock es un plugin jQuery que nos permiter añadir un reloj con distintos modos de funcionamiento y con distintas utilidades.

Añadir este reloj o cuenta atrás en nuestras páginas es tan sencillo como añadir en la cabecera o <head> la librería jQuery, el plugin y su llamada (con opciones) como por ejemplo:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="epiclock/javascript/jquery.dateformat.js"></script>
<script type="text/javascript" src="epiclock/javascript/jquery.epiclock.js"></script>
<script type="text/javascript">
$(function () {
    $('#clock').epiclock({
        mode: 'countdown', 
        target: '2013 12 31 11:59:59'
    }).bind('timer', function(){
        $('<span>This timer has expired!</span>').css({color: '#F60000', display: 'none', paddingLeft: 10}).appendTo(this).fadeIn(250);
    });
});
</script>

En el caso del ejemplo en funcionamiento hemos querido añadir una cuenta atrás hasta una fecha concreta mostrando cuando llegue la fecha un mensaje indicando sobre la expiración. Fíjate que dentro del bind() que es donde está el código de control del fin de la cuenta podríamos añadir el código que quereamos, incluso podríamos incluir un ajax para ejecutar un php en ese momento para que actualice un registro en base de datos por ejemplo.

En el <body> debereos incluir en contenedor con id=»clock» en el lugar donde queramos que aparezca la cuenta atrás:

<div id='clock'></div>

Lo que me gusta de este plugin es que es bastante exacto con las cuentas atrás, sencillo de implementar y viene por defecto sin personalizar pudiéndole dar fácilmente el estilo que deseemos.

Ver el ejemplo en funcionamiento

Ver más ejemplos

Clock Guide

Descargar