Vamos a realizar un reloj dinámico para incluirlo en una página web, que muestra las horas, minutos y segundos como un texto en una capa independiente. Cada segundo que pasa se actualiza el texto de la capa, utilizando Javascript, para crear un efecto de reloj digital DHTML.

Es un efecto DHTML sencillo de realizar. Por un lado necesitaremos calcular la hora actual con Javascript y por otro lado ser capaces de actualizar el texto de una capa, para cambiarlo cada vez que pasa un segundo y cambia la hora actual.

Referencia:Este ejercicio hace uso de unos scripts que ya fueron comentados en DesarrolloWeb.com en el artículo Reloj con Javascript. También se hará uso de una librería para generar HTML Dinámico compatible con todos los navegadores, llamada X Library, que está comentada en el manual de DesarrolloWeb.com DHTML Cross Browser.

El código HTML y CSS

Para colocar el reloj en una página utilizaremos una capa independiente. La capa, que se coloca en una página web utilizando una etiqueta <DIV>, se podrá situar en el lugar donde deseamos que aparezca el reloj.

El estilo del reloj puede alterado como deseemos, simplemente cambiando la declaración CSS asociada a la capa donde se coloque el reloj.

<div id="capareloj" style="font-size:8pt; color:#cc3333; font-family:verdana,arial,helvetica; font-weight:bold;">
</div>

Como vemos, en un principio no se incluye ningún texto en la capa del reloj. Dentro debería situarse la hora actual, pero como esa hora no la sabemos en un principio, antes debemos calcularla mediante Javascript, pero eso lo veremos a continuación.

Javascript para el cálculo de la hora actual

Este trozo de código es prácticamente igual que el que habíamos utilizado en el artículo Reloj con Javascript, donde quedó también comentado.

function mueveReloj(){
   momentoActual = new Date()
   hora = momentoActual.getHours()
   if (hora<10) hora = "0" + hora
   minuto = momentoActual.getMinutes()
   if (minuto<10) minuto = "0" + minuto
   segundo = momentoActual.getSeconds()
   if (segundo<10) segundo = "0" + segundo

   horaImprimible = hora + " : " + minuto + " : " + segundo

   cambiaTexto(horaImprimible)

   setTimeout("mueveReloj()",1000)
}

El código anterior muestra la implementación de la función mueveReloj(), que se encarga de calcular la hora actual y actualizar la capa del reloj.

Simplemente se calcula la hora actual utilizando la clase Date() de Javascript. Se extraen los segundos, minutos y horas (agregando un cero a la izquierda en caso de que estos sean menores que 10, para que una hora como 1:4:6 se muestre como 01:04:06, que es un formato más habitual)

Luego se cambia el texto de la capa, con la función cambiaTexto(), que veremos más adelante.

Por último, se vuelve a llamar a la función mueveReloj() con un retardo de 1000 milisegundos (un segundo) para que se vuelva a actualizar el valor del reloj pasado un segundo.

Función para actualizar el texto de una capa

Ahora veremos la función cambiaTexto(), que se encarga de actualizar el reloj. La función recibe el valor de la nueva hora, que tiene que poner como texto de la capa del reloj. El cambio del texto de una capa es una tarea que se tiene que hacer con DHTML.

function cambiaTexto(nuevaHora){
   xInnerHtml('capareloj',nuevaHora)
}

Simplemente llamamos a la función xInnerHtml(), que recibe el identificador de la capa a actualizar (atributo id de la etiqueta <div> donde estaba el reloj) y la cadena con la nueva hora. xInnerHtml(), que se encarga de cambiar el texto de la capa, es una función de las librerías xLibrary, que son compatibles con cualquier navegador. La librería internamente averigua qué navegador está ejecutando el código y realiza las acciones necesarias dependiendo de este navegador.

Puesta en marcha del reloj con el evento onload

Para que el reloj empiece a mostrar el instante actual (pues en un principio hay que recordar que el texto de la capa del reloj estaba vacío), se debe realizar una llamada a la función mueveReloj(). Esta función ya se encarga de mostrar la hora actual y llamarse a si misma cada segundo, para continuar actualizando el valor mostrado por el reloj.

Esa llamada inicial la vamos a incorporar dentro del evento onload de la etiqueta , que se ejecuta cuando la página ha terminado de cargarse en el navegador del visitante.

<body onload="mueveReloj()">

Incluir la librería xLibrary

Por último, debemos incluir la librería xLibrary en el código de este ejemplo, para se pueda ejecutar la página sin problemas ya que hace uso de una función de esta librería.

Las xLibrary son un juego de funciones bastante grande, pero con la herramienta X Compiler se puede generar un archivo a incluir mínimo para el correcto funcionamiento de este ejemplo.

Todo en marcha

Acabamos con un enlace para ver el ejemplo en marcha.

También se puede descargar un zip con los contenidos de este ejercicio.