Tweet
Bom tarde galera!
Bom trouxe uma função javascript que cria um relógio digital. Este relógio pode ser colocado em qualquer parte da página. Até é possível coloca-lo na barra de estado ou na barra de título da página. Esta função foi testada no Mozilla Firefox 3.6.6, no IE versão 8.0 e no Google Chrome versão 6.0.472.63 e em todos funcionou muito bem. Em todos os browsers testados o relógio também apareceu na aba (ou guia) e continuo a funcionar mesmo quando a aba perdeu o focus.
NOTA: para quem utiliza Firefox o relógio pode não aparecer na barra de status. Isso acontece porque o Firefox pode estar configurado para impedir instruções que alteram o título e o texto barra de estado. Este recurso pode ser habilitado em Ferramentas -> Conteúdo -> Permitir Javascript (avançado…) -> Modificar o texto na barra de status.
Bom aqui vai algumas explicações para aqueles que estão aprendendo Javascript.
Inicialmente criamos um objecto do tipo Date. A classe Date contém funções para a manipulação da data e hora. Precisamos dela para saber a hora. As funções getHours(), getMinutes() e getSeconds () da classe Date retornam a hora, o minuto e os segundos actuais, respectivamente. Também declaramos a variável texto, que irá guardar o texto que é exibido para o utilizador.
Depois verificamos se a hora é menor que 10. Se sim acrescentamos um zero a frente. É só para formatar a hora, deixando-a no formato hh:mm:ss. A instrução window.defaultStatus=texto; altera a o texto da barra de estado para texto. Da mesma forma a alteramos o título da página, alterando a propriedade window.document.title.
Para altera o texto no corpo da página usamos a função window.document.getElementById() que, dado um ID retorna o objecto que possui este ID. No caso do texto (que se encontra dento do tag span) alteramos a propriedade innerHTML. A propriedade innerHTML de um elemento contém todo o texto que se encontra entre a abertura da tag e o fechamento da tag. Fez confusão? Vamos a um exemplo:
O innerHTML seria “Fórum Guia do Hacker” porque é o se encontra dentro da tag. É isso que estamos a fazer, a alterar o texto que se encontra entre as tags
e
do elemento que tem o ID “relogio”. No caso do botão a coisa fica mais simples: só temos que altera a propriedade value!
Para terminar chamamos a função setTimeout(). Este passo é fundamental! A função setTimeout() recebe dois parâmetros: o nome de uma função e o tempo, em milissegundos. Basicamente estamos a dizer ao browser para chamar a nossa função daqui a 1 segundo. Isto é necessário para alterar o valor do relógio.
Bom é isso. Espero que tenham gostado.
Bom trouxe uma função javascript que cria um relógio digital. Este relógio pode ser colocado em qualquer parte da página. Até é possível coloca-lo na barra de estado ou na barra de título da página. Esta função foi testada no Mozilla Firefox 3.6.6, no IE versão 8.0 e no Google Chrome versão 6.0.472.63 e em todos funcionou muito bem. Em todos os browsers testados o relógio também apareceu na aba (ou guia) e continuo a funcionar mesmo quando a aba perdeu o focus.
NOTA: para quem utiliza Firefox o relógio pode não aparecer na barra de status. Isso acontece porque o Firefox pode estar configurado para impedir instruções que alteram o título e o texto barra de estado. Este recurso pode ser habilitado em Ferramentas -> Conteúdo -> Permitir Javascript (avançado…) -> Modificar o texto na barra de status.
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script language="javascript" type="text/javascript"> // Adiciona um relogio na barra de titulo, na barra de status e no corpo da página function relogio(){ // Variáveis var data = new Date(); var hora = data.getHours(); // Obtém a hora actual var minuto = data.getMinutes(); // Obtém o minuto actual var segundo = data.getSeconds(); // Obtém o segundo actual var texto="São "; // Texto com as horas var aux; if(hora < 10) texto+="0"+hora; // Força a representação com dois digitos else texto+=hora; if(minuto < 10) texto+=":0"+minuto; else texto+=":"+minuto; if(segundo < 10) texto+=":0"+segundo; else texto+=":"+segundo; window.defaultStatus=texto; // Altera o texto da barra de estado window.document.title=texto; // Altera o titulo da barra de titulo window.document.getElementById("relogio").innerHTML=texto; // Altera o texto do corpo da página window.document.getElementById("relogio_bt").value=texto; aux = setTimeout("relogio()", 1000); // Agenda a execução dessa mesma função para 1000 ms (1s) } </script> </head> <body onload="relogio()"> <span id="relogio"></span> <input type="button" value="" id="relogio_bt" /> </body> </html>
Inicialmente criamos um objecto do tipo Date. A classe Date contém funções para a manipulação da data e hora. Precisamos dela para saber a hora. As funções getHours(), getMinutes() e getSeconds () da classe Date retornam a hora, o minuto e os segundos actuais, respectivamente. Também declaramos a variável texto, que irá guardar o texto que é exibido para o utilizador.
Depois verificamos se a hora é menor que 10. Se sim acrescentamos um zero a frente. É só para formatar a hora, deixando-a no formato hh:mm:ss. A instrução window.defaultStatus=texto; altera a o texto da barra de estado para texto. Da mesma forma a alteramos o título da página, alterando a propriedade window.document.title.
Para altera o texto no corpo da página usamos a função window.document.getElementById() que, dado um ID retorna o objecto que possui este ID. No caso do texto (que se encontra dento do tag span) alteramos a propriedade innerHTML. A propriedade innerHTML de um elemento contém todo o texto que se encontra entre a abertura da tag e o fechamento da tag. Fez confusão? Vamos a um exemplo:
Código HTML:
<p>Fórum Guia do Hacker </p>
Código HTML:
<span>
Código HTML:
</span>
Para terminar chamamos a função setTimeout(). Este passo é fundamental! A função setTimeout() recebe dois parâmetros: o nome de uma função e o tempo, em milissegundos. Basicamente estamos a dizer ao browser para chamar a nossa função daqui a 1 segundo. Isto é necessário para alterar o valor do relógio.
Bom é isso. Espero que tenham gostado.
Comment