Obtenha a hora atual em JavaScript
-
Obtenha a hora atual com o objeto
Date
em JavaScript - Obtenha a hora atual no formato UTC 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