Relógio digital com Javascript

Com esta simples função em javascript é possível criar um relógio digital para seu site:

Coloque este código entre as tags HEAD do site:

<script language="JavaScript">
function do_Relogio(){
    momentoAtual = new Date()
var hora = momentoAtual.getHours()
if(hora<10) hora = "0"+hora;

var minuto = momentoAtual.getMinutes()
if(minuto<10) minuto = "0"+minuto;

var segundo = momentoAtual.getSeconds()
if(segundo<10) segundo = "0"+segundo;

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

    document.form_relogio.relogio.value = horaImprimivel

    setTimeout("do_Relogio()",1000)
}
</script>

Dentro da tag <body> chame a função no evento onload assim:

<body onload="do_Relogio();">

Crie um formulário com o campo que exibirá a hora assim:

<form name="form_relogio" align="center" style="margin:01px; padding:03px;">
<input type="text" name="relogio" size="09" readonly="true" style="color:#339966; font-size:11px;>
</form>

Como podem ver a função javascript captura a data atual date(), extrai dela a hora, os minutos e os segundos e armazena nas variáveis. Após isto cria-se outra variável concatenando as horas, minutos e segundos para ficarem com o formato de horas (00:00:00 ) e atribui-se ao input do form o valor retornado (usamos um input do tipo texto). Com setTimeout fazemos a atualização do valor das variáveis a cada 1000 milisegundos (1s). Muito simples e didático.

Nenhum comentário:

Postar um comentário