Reloj DHTML, con Javascript y capas

Creamos un reloj dinámico en una página web utilizando DHTML. El reloj se muestra en una capa independiente, que se actualiza a cada segundo con Javascript compatible para todos los navegadores.

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.

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 sobre las funciones setTimeout y setInterval.

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.

Usuarios que han visto este tema también han visto...

- Pase de diapositivas con DHTML
- Eventos del raton
- Un formulario con campos que se esconden con DHTML
- Conceptos de Arrastrar (Drag) y Soltar (Drop)

- Versión imprimible de este documento

- Enviar por e-mail este documento