Código-Fonte
Aqui na página colocamos:
<input type='text' value='00:00:00' id='relogio' readonly size='6' style="font-size: 200%; color:red"/> <script type="text/javascript" src="/scripts/relogio.js"></script> |
Que cria um input de texto com nome relógio e depois chamamos o script relogio.js que contém o seguinte código:
function proximo_segundo(){ var hoje = new Date var hora = hoje.getHours() var minutos = hoje.getMinutes() var segundos = hoje.getSeconds() relogio = document.getElementById('relogio') relogio.value = hora +":"+minutos+":"+segundos setTimeout('proximo_segundo()',1000) } proximo_segundo() |
Ele cria um objeto Date, encontro o elemento com id ‘relogio’ e coloca no valor dele as informações extraÃdas do objeto Date. Em seguida ele agenda para daqui a um segundo chamar a si próprio, recursivamente.
Um refinamento que se pode fazer nesse código é uma função auxiliar para preencher com um zero à esquerda, transformando 1:2:3 em 01:02:03. Eu não coloquei isso para deixar o código o mais simples possÃvel.
Como eu ainda sou muito novinho no JavaScript eu não sei se usar uma recursão desse tipo é uma boa idéia ou não. Era isso ou um laço infinito.