Diese Funktion "setDaytimeBackground()" setzt das Hintergrundbild eines Elements basierend auf der aktuellen Tageszeit.
- Füge den folgenden Code in dein JavaScript-Datei oder in den <script>-Tag deiner HTML-Seite ein:
functionsetDaytimeBackground(){varelement=document.querySelector('.background-image');if(element){varnow=newDate();varhour=now.getHours();if((hour>=0&&hour<6)||(hour>=22&&hour<=23)){// Nacht (zwischen 0 Uhr und 6 Uhr sowie zwischen 22 Uhr und 23 Uhr)element.style.backgroundImage='url("./img/bgs/website_night.png")';}elseif((hour>=6&&hour<10)||(hour>=19&&hour<22)){// Sonnenuntergang (zwischen 6 Uhr und 10 Uhr sowie zwischen 19 Uhr und 22 Uhr)element.style.backgroundImage='url("./img/bgs/website_sunset.png")';}else{// Tag (zwischen 10 Uhr und 19 Uhr)element.style.backgroundImage='url("./img/bgs/website_daylight.png")';}}}setDaytimeBackground();// Setze das Hintergrundbild beim Laden der Seite// Überprüfe und setze das Hintergrundbild alle 5 MinutensetInterval(setDaytimeBackground,300000);Ersetze './img/bgs/website_night.png', './img/bgs/website_sunset.png' und './img/bgs/website_daylight.png' mit den tatsächlichen Pfaden zu deinen Hintergrundbildern.
Füge der gewünschten HTML-Elementklasse das Attribut background-image hinzu.
<divclass="background-image"></div>- Das Hintergrundbild wird beim Laden der Seite automatisch gesetzt. Außerdem wird alle 5 Minuten überprüft und gegebenenfalls aktualisiert.
- Stelle sicher, dass du die richtigen Pfade zu den Hintergrundbildern angibst.
- Du kannst die Tageszeit-Bedingungen in der setDaytimeBackground()-Funktion anpassen, falls du andere Zeiträume für Nacht, Sonnenuntergang und Tag verwenden möchtest.
- Das Interval für die Überprüfung und Aktualisierung des Hintergrundbildes ist auf 5 Minuten (300000 Millisekunden) eingestellt. Du kannst dies nach Bedarf ändern, indem du den Wert im "setInterval-Aufruf" anpasst.
- Vergiss nicht, die CSS-Styles für das ausgewählte Element entsprechend anzupassen, um die Hintergrundbilder optimal darzustellen.