Aktuelle Uhrzeit in JavaScript abrufen
-
Aktuelle Uhrzeit mit dem Objekt
Datein JavaScript abrufen - Aktuelle Uhrzeit im UTC-Format in JavaScript abrufen
- Holt die gesamte aktuelle Zeit im lokalen Format in JavaScript
Es gibt Zeiten, in denen Sie möglicherweise das aktuelle Datum oder die aktuelle Uhrzeit auf Ihrer Website anzeigen möchten, z. B. wenn Sie eine Webanwendung wie eine Digitaluhr erstellen, in der Sie dem Benutzer die aktuelle Uhrzeit anzeigen möchten. Dies kann einfach mit Hilfe des von der JavaScript-Sprache bereitgestellten Objekts Date erfolgen.
Aktuelle Uhrzeit mit dem Objekt Date in JavaScript abrufen
Mit dem Objekt Date in JavaScript können wir mit Datum und Uhrzeit arbeiten. Mit diesem Objekt können wir entweder die Zeit manuell einstellen und dann abrufen oder die Daten zur aktuellen Zeit abrufen. Im Folgenden finden Sie einige Methoden, mit denen wir die Zeit in JavaScript ermitteln können.
| Methoden | Zweck |
|---|---|
getHours() |
Es gibt die Stunden gemäß der Weltzeit (0-23) zurück. |
getMinutes() |
Es gibt die Minuten gemäß der Weltzeit (0-59) zurück. |
getSeconds() |
Es gibt die Sekunden gemäß der Weltzeit (0-59) zurück. |
Versuchen wir dies anhand des folgenden Codebeispiels zu verstehen. Das folgende Programm zeigt die aktuelle Uhrzeit im Browser an. Wir alle wissen, dass die Zeit aus drei Dingen besteht: Stunden, Minuten und Sekunden. Um diese Daten abzurufen, stehen in JavaScript verschiedene Methoden zur Verfügung.
<!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>
Ausgabe:
22 hrs
56 min
19 sec
Für die Anzeige dieser 3 Dinge auf der Webseite werden 3 Absatz-Tags verwendet. Jedem dieser Tags ist eine id zugeordnet. Mit dieser id können wir mit der Methode document.getElementById() auf diese HTML-Elemente in unserem JavaScript-Programm zugreifen. Danach speichern wir jedes dieser HTML-Tags in den Variablen mit den Namen displayHours, displayMinutes und displaySeconds.
Um die aktuelle Uhrzeit zu erhalten, müssen wir das Objekt Date als Konstruktor aufrufen (beachten Sie, dass wir dort ein Schlüsselwort new haben). Dieses Date-Objekt gibt eine Zahl zurück, die wir in der Variablen currentTime speichern. Die Variable currentTime enthält jetzt die gesamte Zeit (Stunden, Minuten und Sekunden).
Wir haben die aktuelle Uhrzeit und die 3 Absatz-Tags, mit deren Hilfe wir die Uhrzeit in unserem Browser anzeigen. Um die einzelnen Felder, d. H. Stunden, Minuten und Sekunden, abzurufen, verwenden wir die Methoden getHours(), getMinutes() und getSeconds() für die Variable currentTime. Mit der Eigenschaft innerHTML können wir diese einzelnen Felder jedem der Absatz-Tags zuweisen. Wenn Sie den obigen Code im Browser als HTML-Dokument ausführen, erhalten Sie die aktuelle Uhrzeit als Ausgabe im Browserfenster.
Da dieses Programm die aktuelle Ortszeit basierend auf unserem Computer anzeigt, kann die obige Ausgabe abhängig von der Zeit variieren, zu der Sie den obigen Code ausführen.
Wenn Sie die gesamte Zeit mit dem Zeitformat (GMT, UTC, IST usw.) und dem Datum möchten, können Sie dem Absatz-Tag die Variable currentTime mithilfe der Eigenschaft innerHTML wie unten gezeigt direkt zuweisen.
<!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>
Ausgabe:
Wed Apr 14 2021 23:30:12 GMT+0530 (India Standard Time)
Aktuelle Uhrzeit im UTC-Format in JavaScript abrufen
Es gibt verschiedene Methoden, mit deren Hilfe Sie die Zeit im UTC-Format (Universal Time Coordinate) abrufen können. Diese Methoden funktionieren fast genauso wie die oben genannten Methoden.
Unten finden Sie eine Liste von Methoden, mit denen Sie die Zeit im UTC-Format anzeigen können.
| Methoden | Zweck |
|---|---|
getUTCHours() |
Es gibt den Stundenwert im universellen Zeitformat (0-23) zurück. |
getUTCMinutes() |
Es gibt den Minutenwert im universellen Zeitformat (0-59) zurück. |
getUTCSeconds() |
Es gibt den Sekundenwert im universellen Zeitformat (0-59) zurück. |
Holt die gesamte aktuelle Zeit im lokalen Format in JavaScript
Die Methoden, die wir gesehen haben, geben nur einen bestimmten Teil der Zeit zurück, entweder nur Stunden, Minuten oder Sekunden und nicht die gesamte Zeit selbst. Um die gesamte aktuelle Zeit im lokalen Format abzurufen, können wir eine Methode mit dem Namen toLocaleTimeString() verwenden.
<!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>
Ausgabe:
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