Un reloj muy colorido con jQuery

Este script de jQuery, crea un reloj muy especial al que han llamado tzineClock y es muy sencillo de agregar.

Podemos descargar el ejemplo completo en formato ZIP desde la web del autor y obviamente, lo primero es tener la librería y lo más simple es usar las AJAX Libraries API de Google:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js' type='text/javascript'/>

Luego, el script en si mismo llamado jquery.tzineClock.js que podemos alojar en un servidor:

<script type='text/javascript' src='URL_jquery.tzineClock.js'/>

o agregar a la plantilla utilizando CDATA:

<script type='text/javascript'>
//<![CDATA[
  ... aquí colocamos el contenido del script ...
//]]>
</script>

y por último el CSS que también está en el demo y donde podemos configurar algunas cosas; por ejemplo:

.clock { /* aquí podemos establecer el color del fondo y el tamaño */ }
.clock .bg, .clock .front { /* aquí podemos establecer el color del fondo y los tamaños de cada sector */ }

/* esto, deberemos cambiarlo, alojar las tres imágenes (o cualquier otra) y colocar la URL */
.orange .bg.left { background: url(URL_bg_orange.png) no-repeat left top; }
.green .bg.left { background: url(URL_bg_green.png) no-repeat left top; }
.blue .bg.left { background: url(URL_bg_blue.png) no-repeat left top; }
.orange .bg.right { background: url(URL_bg_orange.png) no-repeat right top; }
.green .bg.right { background: url(URL_bg_green.png) no-repeat right top; }
.blue .bg.right { background: url(URL_bg_blue.png) no-repeat right top; }

¿Cómo hacemos que funcione? Agregamos un DIV donde nos guste verlo y ejecutamos el script cuando la página haya termiando de cargarse:

<div id="fancyClock"></div>
<script type='text/javascript'> $(document).ready(function(){ $('#fancyClock').tzineClock(); }); </script>

REFERENCIAS:Tutorialzine