CriarWeb.com > Manuais > Workshop de Cross-Browser DHTML

Vamos realizar um relógio dinâmico para incluí-lo em uma página web, que mostra as horas, minutos e segundos como um texto em uma camada independente. Cada segundo que passa se atualiza o texto da camada, utilizando Javascript, para criar um efeito de relógio digital DHTML.

É um efeito DHTML simples de realizar. Por um lado, necessitaremos calcular a hora atual com Javascript e por outro lado ser capazes de atualizar o texto de uma camada, para mudá-lo cada vez que passa um segundo e muda a hora atual.

Referência:Este exercício faz uso de uns scripts que já foram comentados em CriarWeb.como no artigo Relógio em Javascript. Também se fará uso de uma biblioteca para gerar HTML Dinâmico compatível com todos os navegadores, chamada X Library, que está comentada no manual de CriarWeb.com DHTML Cross Browser.

O código HTML e CSS

Para colocar o relógio em uma página utilizaremos uma camada independente. A camada, que se coloca em uma página web utilizando uma etiqueta <DIV>, se poderá situar no lugar onde desejarmos que apareça o relógio.

O estilo do relógio pode alterado como desejarmos, simplesmente mudando a declaração CSS associada à camada onde se coloque o relógio.

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

Como vemos, à princípio não se inclui nenhum texto na camada do relógio. Dentro deveria se situar a hora atual, porém como essa hora não a sabemos à princípio, antes devemos calculá-la mediante Javascript, mas isso o veremos a seguir.

Javascript para o cálculo da hora atual

Este pedaço de código é praticamente igual ao que havíamos utilizado no artigo Relógio com Javascript, onde também ficou comentado.

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

   horaImprimivel = hora + " : " + minuto + " : " + segundo

   mudaTexto(horaImprimivel)

   setTimeout("moveRelogio()",1000)
}

O código anterior mostra a implementação da função moveRelogio(), que se encarrega de calcular a hora atual e atualizar a camada do relógio.

Simplesmente se calcula a hora atual utilizando a classe Date() de Javascript. Extraem-se os segundos, minutos e horas (agregando um zero à esquerda em caso de que estes sejam menores que 10, para que uma hora como 1:4:6 se mostre como 01:04:06, que é um formato mais habitual)

Logo, muda-se o texto da camada, com a função mudaTexto(), que veremos mais adiante.

Por último, se volta a chamar à função moveRelogio() com um atraso de 1000 milésimos de segundos (um segundo) para que se volva a atualizar o valor do relógio passado um segundo.

Função para atualizar o texto de uma camada

Agora veremos a função mudaTexto(), que se encarrega de atualizar o relógio. A função recebe o valor da nova hora, que tem que colocar como texto da camada do relógio. A mudança do texto de uma camada é uma tarefa que tem que ser feita com DHTML.

function mudaTexto(novaHora){
   xInnerHtml('camadarelogio',novaHora)
}

Simplesmente chamamos à função xInnerHtml(), que recebe o identificador da camada a atualizar (atributo id da etiqueta <div> onde estava o relógio) e a cadeia com a nova hora. xInnerHtml(), que se encarrega de mudar o texto da camada, é uma função das bibliotecas xLibrary, que são compatíveis com qualquer navegador. A biblioteca internamente averigua que navegador está executando o código e realiza as ações necessárias dependendo deste navegador.

Funcionamento do relógio com o evento onload

Para que o relógio comece a mostrar o instante atual (pois à princípio há que lembrar que o texto da camada do relógio estava vazio), se deve realizar uma chamada à função moveRelogio(). Esta função já se encarrega de mostrar a hora atual e chamar a si mesma a cada segundo, para continuar atualizando o valor mostrado pelo relógio.

Vamos incorporar essa chamada inicial dentro do evento onload da etiqueta , que se executa quando a página tiver terminado de se carregar no navegador do visitante.

<body onload="moveRelogio()">

Incluir a biblioteca xLibrary

Por último, devemos incluir a biblioteca xLibrary no código deste exemplo, para que que se possa executar a página sem problemas já que faz uso de uma função desta biblioteca.

As xLibrary são um jogo de funções bastante grande, porém com a ferramenta X Compiler pode-se gerar um arquivo a incluir mínimo para o correto funcionamento deste exemplo.

Tudo em funcionamento

Acabamos com um link para ver o exemplo em funcionamento.