Text mit Javascript verändern ab einer bestimmten Uhrzeit?
Hallo, ich möchte gerne dass sich ein Text, ab einer bestimmten Uhrzeit ändert.
Beispiel:
ab 5 Uhr: Guten Morgen [...]
ab 12 Uhr: Guten Tag [...]
ab 17 Uhr: Guten Abend [...]
Würde dies irgendwie Funktionieren?
Vielen Dank im voraus für die Antworten :)
2 Antworten
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/
Statt
h <= 3
Kann man auch
h < 4
Schreiben, das gleiche für die anderen Bedingungen. So wird es vielleicht etwas eindeutiger, ab wann der Wechsel stattfindet.
Man kann den Code natürlich auch testen, ohne jetzt bis 4:00 nachts warten zu müssen:
const now = new Date();
now.setHours(3);
now.setMinutes(59);
würde die Uhrzeit bspw. auf 03:59 setzen. Dann kann man sich anschauen, ob das richtige Wort bei rauskommt. Eine Minute später wird dann die Funktion nochmal ausgeführt, es wäre dann aber wieder 03:59 und nicht 04:00, da wir mit dem Code oben ja immer 03:59 haben. Dass die Funktion nochmal ausgeführt wird, lässt sich aber leicht mit einem eingefügten log oä. erkennen:
console.log("updateGreeting called"); Wo man ein bisschen reinkommen muss, aber was sich wirklich lohnt, sind die Developer Tools des Browsers. Zum nachvollziehen von der eigenen Website und was bei Javascript Code Zeile für Zeile passiert wirklich ungemein hilfreich:
Ou was mir noch einfällt: Wie kann ich am besten die Zeitzone automatisch ändern lassen und wie würde es im Code aussehen? Das würde mich noch interessieren :)
new Date()
Gibt automatisch die Zeit abhängig von der Zeitzone der Person an. Dieser Code ist also Zeitzonengerecht, wenn man sich nicht gerade mit der offenen Website in den Flieger setzt, ohne neuzuladen ^^ Oder die Seite während der Zeitumstellung offen lässt.
Dafür gibt es das Standardobjekt Date.
const now = new Date();
Gibt dir die aktuelle Zeit als Date Objekt. Darauf gibt's dann diverse Funktionen, zum Beispiel
if (now.getHours() >= 5) {
console.log("Guten Morgen");
}
Um die Stunden, Minuten, ... auszulesen.
Lies mehr dazu hier. Generell kann ich die MDN Seiten zu JavaScript, HTML und Co sehr empfehlen, um mehr zu lernen
Vielen Dank für deine Antwort. Ich hätte da noch 2-3 Fragen.
Das sind jetzt meine Codes:
<p>Guten <span id="greeting"></span>,...
var h = new Date().getHours();
var e = document.getElementById("greeting");
if (h <= 3) { // bis 04:00 Uhr
e.innerHTML = "Abend";
} else if (h <= 11) { // bis 12:00 Uhr
e.innerHTML = "Morgen";
} else if (h <= 16) { // bis 17:00 Uhr
e.innerHTML = "Tag";
} else { // bis 04:00 Uhr
e.innerHTML = "Abend";
}
Ich habe ja e.innerHTML verwendet. Nun habe ich gehört dass das nocht so sicher sein soll?! Gibt es da eine Möglichkeit wie man das Zielobjekt genauer ansprechen kann oder ist das so in Ordnung?
Des weiteren würde ich gerne nach (theoretisch) jeder Aktualisierung die Seite aktualisieren, damit das neue Wort automatisch da steht. Ich habe jedoch oberhalb auf meiner Seite eine Dia-Show, die bei der Aktualisierung nicht mit betroffen sein soll, sondern wirklich nur <span id="greeting"></span>. Und die Seite soll da stehen bleiben wo man zuletzt war (man soll nicht nach oben Katapultiert werden ^^) => Wenn das alles irgendwie möglich ist, dann würde sogar eine der zwei Methoden ausreichen, lieber wäre mir jedoch die letztere. VG Klexxsy
Herzlichen Dank für die so schnelle Antwort :). Dies hilft mir sehr. Nur noch eine kurze Frage am ende:
Ich habe es jetzt schon die ganze Zeit getestet um es zu verstehen, bin mir aber immer noch unsicher. Wechselt es (so wie der Code da steht) die Wörter wie oben in der Ursprünglichen Frage? Also ab um 4 "Morgen", ab um 12 "Tag", ab 17 Uhr "Abend" bis wieder um 4?
Denn es ist ziemlich verwirrend 11 für 12:00 Uhr zu schreiben anstatt direkt 12