Wie kann ich eine Uhr mit gestelltem Datum fortlaufen lassen?
Hallo,
ich würde gerne eine Uhr mit einem festgelegten Datum fortlaufend in JavaScript schreiben, allerdings fehlen mir dafür einfach noch die Kenntnisse.
Hat den jemand ein wenig mehr Erfahrung und könnte mir da behilflich sein? Und könnte gegebenenfalls noch etwas erklären?
1 Antwort
Im HTML-Dokument kann man sich zuerst einen Knoten anlegen, in dem die Uhrzeit später hineingeschrieben werden soll.
<time id="time"></time>
Mit JavaScript holt man sich das Element:
const timeOutput = document.getElementById("time");
Dann startet man einen Timer, der jede Sekunde eine Funktion aufruft.
setInterval(updateTime, 1000);
Die Funktion kann so aussehen:
function updateTime() {
const time = new Date();
const hours = ("0" + time.getHours()).slice(-2);
const minutes = ("0" + time.getMinutes()).slice(-2);
const seconds = ("0" + time.getSeconds()).slice(-2);
timeOutput.textContent = `${hours}:${minutes}:${seconds}`;
}
In der ersten Zeile wird ein Datumsobjekt angelegt. Ohne die Übergabe spezifischer Argumente repräsentiert es die aktuelle Zeit. Du kannst aber auch eine bestimmte Startzeit festlegen, lies dazu hier.
Die folgenden Variablen legen das Format für Stunden, Minuten und Sekunden fest. Pauschal wird immer eine 0 vorgehängt und es werden immer nur die letzten zwei Zeichen gewählt. Dies garantiert, dass einstellige Zahlen eine vorgezogene Null bekommen und zweistellige Zahlen nicht.
1 => 01 => 01
10 => 010 => 10
Zum Schluss werden alle Zahlen via Template-String zusammengefügt und als Textknoten für das time-Element im DOM gesetzt. Zuvor hineingeschriebene Textknoten werden bei dieser Aktion gelöscht.
Dieser Aufruf
time.getHours()
liefert dir einen Wert zwischen 0 und 23. Üblicherweise möchte man aber immer eine zweistellige Ausgabe, also für alle Zahlen unter 10 noch eine 0 davor (00/01/02/...).
Mit
("0" + time.getHours())
setzt man also immer eine 0 vor die Zahl. Bei zweistelligen Zahlen würde das allerdings bedeuten, dass die Ausgabe folgend dreistellig ist (010/011/012/...).
Deswegen werden mit der slice-Methode stets die letzten zwei Zahlen herausgeschnitten.
Danke für die ausführliche antwort allerdings versteh ich das noch nicht so ganz mit den variablen der sekunden stunden etc, könntest du mir vielleicht das nochmals eines beispiel erklären ?