Relojes sencillitos

Aunque yo no uso reloj, mucha gente sí lo hace y les gusta tener uno en su blog. De hecho, es algo que casi todos hemos hecho alguna vez; buscar widgets en la red y probar a ver que pasa.

Hay muchos recursos de ese tipo, basta poner reloj + flash en cualquier buscador para que aparezcan decenas de sitios que ofrecen ese tipo de recursos:

• http://www.relojesflash.com/
• http://relojes.pagerank-tracking.com/
• http://www.clocklink.com/
  

Por lo general son pequeños objetos de Flash que basta copiar y pegar en un elemento HTML. Eventualmente, son un poco más complejos pero, es difícil que nos causen problemas.

Sin embargo, no es la única forma de colocar un reloj, también podemos hacerlo con un poco de JavaScript, CSS e imaginación. Claro, no serán espectaculares pero, tienen el sabor de lo artesanal y también son muy sencillos de implementar, sólo necesitamos tres cosas, el código del script, el lugar donde ubicarlo y el estilo gráfico que vamos a utilizar.

El script puede descargarse de este archivo de texto . Basta copiarlo y pegarlo en la plantilla, ya sea antes de </head> o en el elemento HTML que crearemos para contenerlo.

<script type="text/javascript">
// <![CDATA[
  function ejecutarReloj(){
    var digital = new Date(); // leemos la fecha y lahora
    var hours=digital.getHours(); // guardamos la hora
    var minutes=digital.getMinutes(); // guardamos los minutos
    var seconds=digital.getSeconds(); // guardamos los segundos
    var dn='am'; // texto AM o PM
    if (hours>12) {
      dn='pm'; // si pasan de las 12 será PM
      hours=hours-12; // la hora de 0 a 12
    }
    if (hours==0) hours=12; // las 0 horas serán las  12
    if (minutes<=9) minutes='0'+minutes; // formateamos los minutos con dos caracteres
    if (seconds<=9) seconds='0'+seconds; // formateamos los segundos con dos caracteres
    // creamos el código HTML del texto
    crearReloj='<span class=relojHoras>' 
      + hours + '</span>:<span class=relojMinutos>' 
      + minutes + '</span>:<span class=relojSegundos>'
      + seconds + '</span><span class=relojAmPm>'
      + dn + '</span>';
    // y lo escribimos en un DIV
    document.getElementById('elReloj').innerHTML=crearReloj;
    // lo actualizaremos cada segundo
    setTimeout('ejecutarReloj()',1000);
  }
// ]]>
</script>

Ahora necesitamos un bloque DIV donde ubicarlo y luego, llamar a la función del script así que, lo creamos donde queremos que se muestre:

<div id="elReloj"></div>
<script  type="text/javascript">ejecutarReloj();</script>

Lo que nos faltaría es darle forma, colocar las propiedades CSS y allí las posibilidades son muchísimas. Estas son las definiciones de las diferentes partes que lo componen:

<style type="text/css">
#elReloj {  /* es el bloque que contiene el reloj */
  .......
}
.relojHoras { /* es el texto de las horas */
  .......
}
.relojMinutos { /* es el texto de los minutos */
  .......
}
.relojSegundos { /* es el texto de los segundos */
  .......
}
.relojAmPm { /* es el texto AM/PM */
  .......
}
</style>