Obtenha a hora atual em JavaScript

Sahil Bhosale 17 junho 2021 9 maio 2021

JavaScript JavaScript DateTime

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:

11:43:06 PM

Author: Sahil Bhosale

Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.

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

Artigo relacionado - JavaScript DateTime

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