function updateGreeting() {
const now = new Date();
const h = now.getHours();
const m = now.getMinutes();
const e = document.getElementById("greeting");
let addHours = 0;
let addMinutes = m;
if (h <= 3) { // bis 04:00 Uhr
e.textContent = "Abend";
addHours = 3 - h;
} else if (h <= 11) { // bis 12:00 Uhr
e.textContent = "Morgen";
addHours = 11 - h;
} else if (h <= 16) { // bis 17:00 Uhr
e.textContent = "Tag";
addHours = 16 - h;
} else { // bis 04:00 Uhr
e.innerHTML = "Abend";
addHours = 23 - h;
}
// getTime() gibt die aktuelle Zeit in Millisekunden seit UNIX Epoch Time, also 01.01.1970 00:00
// Stunden und Minuten in Millisekunden umwandeln
const waitTime = addHours * 60 * 60 * 1000 + addMinutes * 60 * 1000;
setTimeout(updateGreeting, waitTime)
}
updateGreeting();
Die globale Funktion setTimeout bekommt eine Funktion übergeben, nämlich die Funktion updateGreeting selbst. Und die Wartezeit in Millisekunden. Nach der Wartezeit wird die übergebenen Funktion aufgerufen und es wird erneut geguckt, ob der Text geupdatet werden muss. Durch die Berechnung der Wartezeit abhängig von der aktuellen Uhrzeit muss möglichst selten das Greeting neu berechnet werden. Die Seite muss dafür nicht neugeladen werden, man kann die den ganzen Tag lang so offen lassen.
https://developer.mozilla.org/en-US/docs/Web/API/setTimeout
textContent setzt den Text eines HTML Elements, innerText den Text und löscht dabei noch Kindelemente, die evtl da waren. innerHTML hat das Problem, dass der Text dadrin als HTML Code und auch als Javascript interpretiert werden kann. Falls ein*e Besucher*in deiner Website selbst dort Sachen reinschreiben könnte, wird evtl Code ausgeführt. In deinem kleinen Fall wäre das aber kein Problem, da es nur dir vorgefertigten Greetings in das innerHTML schaffen. Es ist aber eine gute Idee, sich die grundsätzliche Verwendung von dem Ding abzugewöhnen, damit man nicht später damit doch eine Sicherheitslücke erschafft.
https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations
Ich empfehle außerdem die Nutzung von let und const für Variablen. let ist für Variablen, die neue Werte bekommen können und const für Variablen, die nur einmal einen Wert erhalten und danach nie wieder einen neuen Wert erhalten dürfen. var ist quasi das gleiche wie let, hat aber den Nachteil, dass Variablen innerhalb eines Blocks, zB einer Funktion, einer Schleife, einer Bedingung, .... auch außerhalb dieses Blocks definiert werden. Bei const und var gibt es die Variablen hingegen nur in dem aktuellen Level und nicht außerhalb. Bspw. kann man jetzt nicht auf die Variable h außerhalb der Funktion updateGreeting zugreifen, da sie mit const definiert wurde.
https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
