JavaScript: Relógio Digital


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.

8 thoughts on “JavaScript: Relógio Digital

  1. boas.

    desculpa, mas é que eu não consigo meter o relógio a andar, com o primeiro código que meteste.

    podias-me ajudar?
    cumps
    obrigado

  2. E só colocar um script com o código de baixo assim:

    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()

  3. Para preencher com zero à esquerda não precisa fazer muita coisa e o código continua bem simples. É só adicionar o código abaixo logo depois da linha “var segundos = hoje.getSeconds()”:

    if (hora < 10){
    hora = '0' + hora
    }
    if (minutos < 10){
    minutos = '0' + minutos
    }
    if (segundos < 10){
    segundos = '0' + segundos
    }

  4. Gostaria de saber como posso usar esse codigo para fazer o tempo diminuir como se fosse um contador regressivo do dia

  5. faltou “;” no script não ? eu colequei e aqui funfou ! ^^

    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();

  6. Precisei de um relógio recentemente e utilizei seu código com jquery
    segue abaixo minhas alterações:

    function proximo_segundo(){
    var hoje = new Date
    var hora = hoje.getHours();
    var minutos = hoje.getMinutes();
    var segundos = hoje.getSeconds();
    segundos = (segundos < 10 ? "0":"")+segundos;
    return hora +":"+minutos+":"+segundos;
    }

    setInterval(function() {
    $(".relogio span").html( proximo_segundo() )
    },1000);

Leave a Reply

Your email address will not be published. Required fields are marked *