Begrüßung nach Uhrzeit anzeigen 
Autor: Torsten B.
Besucht 119,
Followers 1,
Geteilt 0
Hallo liebe Gemeinde,
ich versuche schon seit einiger Zeit, bestimmte Texte auf meiner Website abhängig von der Uhrzeit ein- und auszublenden.
Konkret möchte ich beispielsweise folgende Begrüßungen anzeigen:
- „Guten Morgen“ von 00:01 Uhr bis 08:59 Uhr
- „Guten Tag“ von 09:00 Uhr bis 17:59 Uhr
- „Guten Abend“ von 18:00 Uhr bis 23:59 Uhr
Leider finde ich bisher keine Lösung, wie ich das umsetzen kann.
Ist eine solche zeitgesteuerte Anzeige mit den Bordmitteln von X5 Pro überhaupt möglich, oder benötige ich dafür ein externes Tool bzw. einen individuellen Code?
Vielen Dank schon einmal für eure Hilfe!
Gepostet am
Eher individuellen Code! Kommt auch darauf an wo du es haben willst!
Autor
Hallo Andreas,
bis jetzt habe ich mir da noch nicht so richtig Gedanken gemacht, wie ich es einblenden möchte, da ich es mit den Zeiten noch nicht hinbekommen habe. Ich könnte mir vorstellen, dass beim Aufruf der Webseite ein kleines Popupfenster aufgeht und sich nach kurzer Zeit (2s) wieder schließt.
Die Frage ist, ob es überhaupt eine Begrüssung geben soll und dann auch noch in einem Popup.
Der Code kann mit Hilfe der KI erstellt werden, hier ein Beispiel (Text und Zeiten anpassen), siehe
----- Code von der Google KI -----
<h1 id="begruessung">Hallo</h1>
<script>
const d = new Date();
const stunde = d.getHours();
let text = "Guten Tag";
if (stunde >= 5 && stunde < 11) {
text = "Guten Morgen";
} else if (stunde >= 18 && stunde < 22) {
text = "Guten Abend";
} else if (stunde >= 22 || stunde < 5) {
text = "Gute Nacht";
} else {
text = "Guten Tag";
}
document.getElementById("begruessung").innerText = text + "!";
</script>
Autor
Ich habe eine Lösung für das HTML-Code-Objekt gefunden:
Anzeige
Guten Morgen, es ist Donnerstag, der 20.08.2026 – 08:35:21 Uhr
Die Uhr läuft sekundengenau weiter.
Um Mitternacht werden Datum, Wochentag und Uhrzeit automatisch aktualisiert.
----------Anfang--------
<div id="zeit-begruessung"></div>
<style>
#zeit-begruessung {
font-size: 32px;
font-weight: 600;
text-align: center;
color: #333333;
opacity: 0;
transform: translateY(8px);
transition: opacity 1s ease, transform 1s ease;
}
#zeit-begruessung.anzeigen {
opacity: 1;
transform: translateY(0);
}
</style>
<script>
(function() {
function aktualisiereUhr() {
const jetzt = new Date();
const stunde = jetzt.getHours();
let begruessung;
if (stunde >= 5 && stunde < 11) {
begruessung = "Guten Morgen";
}
else if (stunde >= 11 && stunde < 18) {
begruessung = "Guten Tag";
}
else {
begruessung = "Guten Abend";
}
// Wochentag
const wochentage = [
"Sonntag",
"Montag",
"Dienstag",
"Mittwoch",
"Donnerstag",
"Freitag",
"Samstag"
];
const wochentag = wochentage[jetzt.getDay()];
// Datum
const tag = String(jetzt.getDate()).padStart(2, "0");
const monat = String(jetzt.getMonth() + 1).padStart(2, "0");
const jahr = jetzt.getFullYear();
// Uhrzeit
const stunden = String(jetzt.getHours()).padStart(2, "0");
const minuten = String(jetzt.getMinutes()).padStart(2, "0");
const sekunden = String(jetzt.getSeconds()).padStart(2, "0");
document.getElementById("zeit-begruessung").textContent =
begruessung + ", es ist " +
wochentag + ", der " +
tag + "." + monat + "." + jahr +
" – " +
stunden + ":" + minuten + ":" + sekunden + " Uhr";
}
// Sofort anzeigen
aktualisiereUhr();
// Jede Sekunde aktualisieren
setInterval(aktualisiereUhr, 1000);
// Sanft einblenden
setTimeout(function() {
document.getElementById("zeit-begruessung")
.classList.add("anzeigen");
}, 100);
})();
</script>
-------------ENDE----------