1

Pretendo fazer um relógio com horário brasileiro, que sempre que passa um segundo ele mostre que passou, ou seja.

São 14:10:12, 14:10:13 etc...

Como poderei fazer?

Obrigado

2
  • Coloquei a tag errada, é do habito kk
    – Gonçalo
    14/10/2016 às 17:37
  • 2
    um simples relógio animado correndo os segundos? 14/10/2016 às 17:43

3 Respostas 3

10

Uma maneira bem simples de fazer isso, usando timezone:

    var myVar = setInterval(myTimer ,1000);
    function myTimer() {
        var d = new Date(), displayDate;
       if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
          displayDate = d.toLocaleTimeString('pt-BR');
       } else {
          displayDate = d.toLocaleTimeString('pt-BR', {timeZone: 'America/Belem'});
       }
          document.getElementById("demo").innerHTML = displayDate;
    }
<div id="demo"></div>

3
  • No Firefox está sendo lançado erros no console: "message": "RangeError: invalid time zone in DateTimeFormat(): AMERICA/SAO_PAULO" 14/10/2016 às 20:07
  • O ideal é utilizar o timezone do lado servidor, pois o javascript não enviar esta informação de maneira segura. 14/10/2016 às 21:32
  • A propriedade existe nos outros navegadores, o firefox lança essa mensagem porque não reconhece zonas por cidade. Ele concentrou tudo apenas num único local por país. 14/10/2016 às 21:35
2

Com jQuery, eu fiz uma vez assim:

var $clock = $('#real-clock');

setInterval(function () {

    $clock.html((new Date).toLocaleString().substr(11, 8));

}, 1000);

Dá pra fazer com javascript puro também:

var clock = document.getElementById('real-clock');
    

setInterval(function () {
    clock.innerHTML = ((new Date).toLocaleString().substr(11, 8));  
}, 1000);
    
<div id="real-clock"></div>

Usei o setInterval com o segundo parâmetro 1000 para que a atualização ocorra de 1 em 1 segundo.

2
  • Isto assim, funciona pelo horario do meu computador, no caso eu sou de Portugal, vejo o horario português, e eu queria um relogio com horario brasileiro.
    – Gonçalo
    14/10/2016 às 17:45
  • Não conheço muito de Javascript, mas tenta substituir por new Date().toString().substr(16, 8). 14/10/2016 às 17:48
1

Pegar a Data pelo Javascript irá sempre retornar o horário atual do computador onde o Javascript roda (no cliente), então se o relógio do usuário estiver incorreto, o seu relógio também estará.

Creio que a maneira mais "segura" seja pegar esse horário do servidor que está executando a aplicação.

Para efeito de explicação vou deixar tudo junto, mas depois aconselho você a fazer um arquivo PHP e pegar as informações com um AJAX de vez em quando para se manter sincronizado,desta forma você pode utilizar um servidor NTP para manter ele sempre sincronizado.

(É mais fácil você garantir o horário do servidor do que garantir o horário no cliente)

<html>
<input type="text" id="hora"/ >
<script>
(function() {
    var time=new Date(<?=gmmktime()?>000);  // 000 -> transforma os segundos retornados pelo PHP em milissegundos que são esperados pelo Javascript
    var hora = document.getElementById('hora');
    setInterval(function () {
        hora.value = ((new Date(<?=gmmktime()?>000)).toLocaleString().substr(11, 8)); 
    }, 1000);
    })();
</script>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .