Obtener la hora actual en JavaScript
-
Obtener la hora actual con el objeto
Dateen JavaScript - Obtener la hora actual en formato UTC en JavaScript
- Obtenga la hora actual completa en formato local en JavaScript
Hay ocasiones en las que es posible que desee mostrar la fecha u hora actual en su sitio web, por ejemplo, cuando crea una aplicación web como un reloj digital donde desea mostrar la hora actual al usuario. Se puede hacer fácilmente con la ayuda del objeto Date proporcionado por el lenguaje JavaScript.
Obtener la hora actual con el objeto Date en JavaScript
El objeto Date en JavaScript nos permite trabajar con fecha y hora. Con este objeto, podemos establecer la hora manualmente y luego obtenerla u obtener los datos sobre la hora actual. A continuación se muestran algunos de los métodos que podemos utilizar para obtener la hora en JavaScript.
| Métodos | Propósito |
|---|---|
getHours() |
Devuelve las horas, según hora universal (0-23) |
getMinutes() |
Devuelve los minutos, según la hora universal (0-59) |
getSeconds() |
Devuelve los segundos, según la hora universal (0-59) |
Intentemos entender esto con la ayuda del siguiente ejemplo de código. El siguiente programa mostrará la hora actual en el navegador. Todos sabemos que el tiempo consta de tres cosas, horas, minutos y segundos. Para obtener cada uno de estos datos, tenemos diferentes métodos disponibles en 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>
Producción :
22 hrs
56 min
19 sec
Para mostrar estas 3 cosas en la página web, usaremos 3 etiquetas de párrafo. Cada una de estas etiquetas tiene un id asociado. Usando este id podremos acceder a estos elementos HTML dentro de nuestro programa JavaScript usando el método document.getElementById(). Después de eso, almacenaremos cada una de estas etiquetas HTML dentro de las variables con los nombres displayHours, displayMinutes y displaySeconds.
Para obtener la hora actual, tenemos que llamar al objeto Date como constructor (observe que tenemos una palabra clave new allí). Este objeto Date devolverá un número que almacenaremos dentro de la variable currentTime. La variable currentTime ahora contiene el tiempo completo (horas, minutos y segundos).
Tenemos la hora actual y las etiquetas de 3 párrafos, con la ayuda de las cuales mostraremos la hora en nuestro navegador. Para obtener los campos individuales, es decir, horas, minutos y segundos, usaremos los métodos getHours(), getMinutes() y getSeconds() respectivamente en la variable currentTime. Usando la propiedad innerHTML, podemos asignar estos campos individuales a cada una de las etiquetas de párrafo. Si ejecuta el código anterior en el navegador como un documento HTML, obtendrá la hora actual como salida en la ventana del navegador.
Dado que este programa mostrará la hora local actual según nuestra computadora, la salida anterior puede variar dependiendo de la hora en que esté ejecutando el código anterior.
Si desea la hora completa con el formato de hora (GMT, UTC, IST, etc.) y la fecha, puede asignar directamente la variable currentTime a la etiqueta de párrafo utilizando la propiedad innerHTML como se muestra a continuación.
<!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>
Producción :
Wed Apr 14 2021 23:30:12 GMT+0530 (India Standard Time)
Obtener la hora actual en formato UTC en JavaScript
Existen diferentes métodos con la ayuda de los cuales puede obtener la hora en formato de hora universal coordinada (UTC). Estos métodos funcionan casi de la misma manera que los métodos anteriores.
A continuación se muestra una lista de métodos que le darán la hora en formato UTC.
| Métodos | Propósito |
|---|---|
getUTCHours() |
Devuelve el valor de la hora en formato de hora universal (0-23) |
getUTCMinutes() |
Devuelve el valor de los minutos en formato de hora universal (0-59) |
getUTCSeconds() |
Devuelve el valor de los segundos en formato de hora universal (0-59) |
Obtenga la hora actual completa en formato local en JavaScript
Los métodos que hemos visto solo devuelven una parte particular del tiempo, ya sea solo horas, minutos o segundos y no todo el tiempo en sí. Entonces, para obtener la hora actual completa en el formato local, podemos usar un método llamado 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>
Producción :
11:43:06 PM
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.
LinkedIn