Zeitabhängig Text/Inhalte auf Website anzeigen?

1 Antwort

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite
02.01.2021, 23:42

Wenn du eine Lösung für Java brauchst, müsstest du zunächst einmal angeben, mit welchem Framework deine Webseite konkret arbeitet (JSP, JSF, Spring, ...?).

So direkt kann ich dir allerdings eine Lösung mit JavaScript zeigen, die dann eben im Browser berechnet wird. Das kann aber auch vorteilhaft sein, wie du in meinem letzten Snippet sehen wirst.

Angenommen, dass ist der HTML-Tag, der den Status anzeigt:

<span id="opened-status"></span>

Er braucht eine ID, damit er vom Skript angesprochen / gefunden werden kann.

Dazu das Skript:

const statusElement = document.getElementById("opened-status");
const currentTime = new Date();

const startTime = new Date();
startTime.setHours(11);

const endTime = new Date();
endTime.setHours(17);
endTime.setMinutes(30);

if (currentTime >= startTime && currentTime <= endTime) {
  statusElement.innerText = "Geöffnet";
}
else {
  statusElement.innerText = "Geschlossen";
}

Wie du das Skript konkret bei dir einbindest, musst du selbst schauen (eine Hilfestellung dazu findest du hier). Es muss jedenfalls nach dem HTML-Tag eingebunden bzw. darf erst geladen werden, nachdem der Tag vom Browser gerendert wurde.

Diese Lösung wurde den Status aber nur aktualisieren, sobald die Seite geladen wird. Wenn ein Nutzer hingegen 10:59 Uhr auf die Seite geht, sie nicht zwischenzeitlich neu lädt und ab 11 Uhr dennoch den neuen Status sehen soll, braucht es einen Timer, der in bestimmten zeitlichen Abständen neu prüft und den Status dann aktualisiert.

const statusElement = document.getElementById("opened-status");
let currentStatus = "";

const startTime = new Date();
startTime.setHours(11);

const endTime = new Date();
endTime.setHours(17);
endTime.setMinutes(30);

function updateStatus() {
  const currentTime = new Date();
  let status;

  if (currentTime >= startTime && currentTime <= endTime) {
    status = "Geöffnet";
  }
  else {
    status = "Geschlossen";
  }

  if (status !== currentStatus) {
    currentStatus = status;
    statusElement.innerText = currentStatus;
  }
}

updateStatus();
setInterval(updateStatus, 1000 * 60);

Dieser Timer aktualisiert den Status einmal pro Minute. Das sollte vollkommen ausreichen.