Obtenha a hora atual em JavaScript

Criado: May-09, 2021 | Atualizado: June-17, 2021

Obtenha a hora atual com o objeto Date em JavaScript
Obtenha a hora atual no formato UTC em JavaScript
Obtenha toda a hora atual no formato local em JavaScript

Há momentos em que você pode querer mostrar a data ou hora atual em seu site, por exemplo, ao criar um aplicativo da web como um relógio digital onde deseja mostrar a hora atual para o usuário. Isso pode ser feito facilmente com a ajuda do objeto Date fornecido pela linguagem JavaScript.

Obtenha a hora atual com o objeto `Date` em JavaScript

O objeto Date em JavaScript permite-nos trabalhar com data e hora. Usando este objeto, podemos definir a hora manualmente e, em seguida, obtê-la ou obter os dados sobre a hora atual. Abaixo estão alguns dos métodos que podemos usar para obter o tempo em JavaScript.

Métodos	Objetivo
`getHours()`	Ele retorna as horas, de acordo com a hora universal (0-23)
`getMinutes()`	Ele retorna os minutos, de acordo com a hora universal (0-59)
`getSeconds()`	Ele retorna os segundos, de acordo com a hora universal (0-59)

Vamos tentar entender isso com a ajuda do exemplo de código abaixo. O programa abaixo exibirá a hora atual no navegador. Todos nós sabemos que o tempo consiste em três coisas: horas, minutos e segundos. Para obter cada um desses dados, temos diferentes métodos disponíveis em JavaScript.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>

      <p id="displayHours"></p>
      <p id="displayMinutes"></p>
      <p id="displaySeconds"></p>


    <script>

      var displayHours = document.getElementById('displayHours');
      var displayMinutes = document.getElementById('displayMinutes');
      var displaySeconds = document.getElementById('displaySeconds');

      var currentTime = new Date();

      displayHours.innerHTML = currentTime.getHours() + " hrs";
      displayMinutes.innerHTML = currentTime.getMinutes() + " min";
      displaySeconds.innerHTML = currentTime.getSeconds() + " sec";
          
    </script>
    
  </body>
</html>

Resultado:

22 hrs
56 min
19 sec

Para exibir essas 3 coisas na página da web, usaremos 3 tags de parágrafo. Cada uma dessas tags possui um id associado a ela. Usando este id, poderemos acessar esses elementos HTML dentro de nosso programa JavaScript usando o método document.getElementById(). Depois disso, vamos armazenar cada uma dessas tags HTML dentro das variáveis com os nomes displayHours, displayMinutes e displaySeconds.

Para obter a hora atual, temos que chamar o objeto Date como um construtor (observe que temos uma palavra-chave new lá). Este objeto Date retornará um número que armazenaremos dentro da variável currentTime. A variável currentTime agora contém o tempo inteiro (horas, minutos e segundos).

Temos a hora atual e as tags de 3 parágrafos, com a ajuda das quais exibiremos a hora em nosso navegador. Para obter os campos individuais, ou seja, horas, minutos e segundos, usaremos os métodos getHours(), getMinutes() e getSeconds(), respectivamente, na variável currentTime. Usando a propriedade innerHTML, podemos atribuir esses campos individuais a cada uma das tags de parágrafo. Se você executar o código acima no navegador como um documento HTML, obterá a hora atual como uma saída na janela do navegador.

Uma vez que este programa exibirá a hora local atual com base em nosso computador, a saída acima pode variar dependendo da hora em que você está executando o código acima.

Se você quiser o tempo inteiro com o formato de hora (GMT, UTC, IST, etc) e a data, você pode atribuir diretamente a variável currentTime à tag de parágrafo usando a propriedade innerHTML conforme mostrado abaixo.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>

      <p id="dateAndTime"></p>

    <script>

      var dateAndTime = document.getElementById('dateAndTime');

      var currentTime = new Date();

      dateAndTime.innerHTML = currentTime;
          
    </script>
    
  </body>
</html>

Resultado:

Wed Apr 14 2021 23:30:12 GMT+0530 (India Standard Time)

Obtenha a hora atual no formato UTC em JavaScript

Existem diferentes métodos com a ajuda dos quais você pode obter a hora no formato Universal Time Coordinate (UTC). Esses métodos funcionam quase da mesma maneira que os métodos acima.

Abaixo está uma lista de métodos que fornecem a hora no formato UTC.

Métodos	Objetivo
`getUTCHours()`	Ele retorna o valor da hora no formato de hora universal (0-23)
`getUTCMinutes()`	Ele retorna o valor dos minutos no formato de hora universal (0-59)
`getUTCSeconds()`	Ele retorna o valor dos segundos no formato de hora universal (0-59)

Obtenha toda a hora atual no formato local em JavaScript

Os métodos que vimos retornam apenas uma parte específica do tempo, seja apenas horas, minutos ou segundos, e não o tempo todo em si. Portanto, para obter toda a hora atual no formato local, podemos usar um método denominado toLocaleTimeString().

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>

      <p id="dateAndTime"></p>

    <script>

      var dateAndTime = document.getElementById('dateAndTime');

      var currentTime = new Date();

      dateAndTime.innerHTML = currentTime.toLocaleTimeString();
          
    </script>
    
  </body>
</html>

Resultado: