Ottieni l'ora corrente in JavaScript
-
Ottieni l’ora corrente con l’oggetto
Datein JavaScript - Ottieni l’ora corrente in formato UTC in JavaScript
- Ottieni l’intera ora corrente nel formato locale in JavaScript
Ci sono momenti in cui potresti voler mostrare la data o l’ora corrente sul tuo sito web, ad esempio, quando crei un’applicazione web come un orologio digitale in cui vuoi mostrare l’ora corrente all’utente. Può essere fatto facilmente con l’aiuto dell’oggetto Date fornito dal linguaggio JavaScript.
Ottieni l’ora corrente con l’oggetto Date in JavaScript
L’oggetto Date in JavaScript ci consente di lavorare con data e ora. Usando questo oggetto, possiamo impostare l’ora manualmente e quindi ottenerla o ottenere i dati sull’ora corrente. Di seguito sono riportati alcuni dei metodi che possiamo utilizzare per ottenere il tempo in JavaScript.
| Metodi | Scopo |
|---|---|
getHours() |
Restituisce le ore, secondo l’ora universale (0-23) |
getMinutes() |
Restituisce i minuti, secondo il tempo universale (0-59) |
getSeconds() |
Restituisce i secondi, secondo il tempo universale (0-59) |
Proviamo a capirlo con l’aiuto dell’esempio di codice riportato di seguito. Il programma seguente mostrerà l’ora corrente sul browser. Sappiamo tutti che il tempo è composto da tre cose, ore, minuti e secondi. Per ottenere ciascuno di questi dati, abbiamo diversi metodi disponibili in 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>
Produzione:
22 hrs
56 min
19 sec
Per visualizzare queste 3 cose sulla pagina web, useremo 3 tag di paragrafo. A ciascuno di questi tag è associato un id. Usando questo id saremo in grado di accedere a questi elementi HTML all’interno del nostro programma JavaScript utilizzando il metodo document.getElementById(). Dopodiché, memorizzeremo ciascuno di questi tag HTML all’interno delle variabili con i nomi displayHours, displayMinutes e displaySeconds.
Per ottenere l’ora corrente, dobbiamo chiamare l’oggetto Date come costruttore (notate che abbiamo una parola chiave new lì). Questo oggetto Date restituirà un numero che memorizzeremo all’interno della variabile currentTime. La variabile currentTime ora contiene l’intero tempo (ore, minuti e secondi).
Abbiamo l’ora corrente e i 3 tag di paragrafo, con l’aiuto dei quali visualizzeremo l’ora sul nostro browser. Per ottenere i singoli campi cioè ore, minuti e secondi useremo i metodi getHours(), getMinutes() e getSeconds() rispettivamente sulla variabile currentTime. Utilizzando la proprietà innerHTML, possiamo assegnare questi singoli campi a ciascuno dei tag di paragrafo. Se esegui il codice precedente sul browser come documento HTML, otterrai l’ora corrente come output nella finestra del browser.
Poiché questo programma visualizzerà l’ora locale corrente in base al nostro computer, l’output di cui sopra può variare a seconda dell’ora in cui si esegue il codice sopra.
Se vuoi l’intera ora con il formato dell’ora (GMT, UTC, IST, ecc.) E la data, puoi assegnare direttamente la variabile currentTime al tag del paragrafo usando la proprietà innerHTML come mostrato di seguito.
<!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>
Produzione:
Wed Apr 14 2021 23:30:12 GMT+0530 (India Standard Time)
Ottieni l’ora corrente in formato UTC in JavaScript
Esistono diversi metodi con cui è possibile ottenere l’ora nel formato UTC (Universal Time Coordinate). Questi metodi funzionano quasi allo stesso modo dei metodi precedenti.
Di seguito è riportato una lista di metodi che ti forniranno l’ora in formato UTC.
| Metodi | Scopo |
|---|---|
getUTCHours() |
Restituisce il valore dell’ora nel formato dell’ora universale (0-23) |
getUTCMinutes() |
Restituisce il valore dei minuti nel formato dell’ora universale (0-59) |
getUTCSeconds() |
Restituisce il valore dei secondi nel formato dell’ora universale (0-59) |
Ottieni l’intera ora corrente nel formato locale in JavaScript
I metodi che abbiamo visto restituiscono solo una parte particolare del tempo, solo ore, minuti o secondi e non l’intero tempo stesso. Quindi, per ottenere l’intera ora corrente nel formato locale, possiamo usare un metodo chiamato 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>
Produzione:
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