How can I make a Brazilian time clock in real time

Asked

Viewed 9,006 times

1

I intend to make a clock with Brazilian time, that every time a second goes by it shows that it has passed, ie.

Are 14:10:12, 14:10:13 etc...

How can I do?

Thank you

javascript

  • I put the wrong tag, it’s from habito kk

  • 2

    a simple animated clock running seconds?

3 answers

10

A very simple way to do this, using 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>

  • Firefox is releasing console errors: "message": "RangeError: invalid time zone in DateTimeFormat(): AMERICA/SAO_PAULO"

  • The ideal is to use the server-side Timezone, because javascript does not send this information securely.

  • The property exists in other browsers, firefox launches this message because it does not recognize zones per city. He concentrated everything only in one place per country.

2

With jQuery, I once did so:

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

setInterval(function () {

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

}, 1000);

You can do it with pure javascript too:

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

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

I used the setInterval with the second parameter 1000 for the update to occur every 1 second.

  • This way, it works by the time of my computer, in case I’m from Portugal, I see the Portuguese time, and I wanted a clock with Brazilian time.

  • I don’t know much about Javascript, but try to replace it with new Date().toString().substr(16, 8).

1

Getting the Date by Javascript will always return the current time of the computer where Javascript runs (in the client), so if the user’s clock is incorrect, your clock will also be.

I believe the most "secure" way is to take this time from the server that is running the application.

For the purpose of explanation I will leave everything together, but then I advise you to make a PHP file and pick up the information with an AJAX from time to time to keep synchronized, this way you can use a server NTP to keep it always in sync.

(It is easier for you to guarantee the server time than to guarantee the client time)

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

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.