• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bildwechsel nach Tageszeit

D

danson

Neues Mitglied
Hallo zusammen,

aaaalso - ich hab mir jetzt stundenlang nen wolf gesucht, aber weder hier noch woanders etwas zu dem Thema gefunden, was mir effektiv weiterhilft - falls ich was übersehen hab bitte kurz melden! Danke! :)


Ich brauche eine Funktion, mit der ich das Hintergrundbild sowie das Bild im headder jeder Seite je nach Tageszeit wechseln kann. Tagsüber (07 Uhr bis 22 Uhr) Bild 1 und in der Nacht (von ca. 22 Uhr bis 07 Uhr) Bild 2.

Leider kann ich kein PHP nutzen, da PHP ja eine serverseitige Scriptsprache ist, ich jedoch die Uhrzeit vom User auslesen möchte, damit das ganze auch authentisch wirkt (dreht sich um nen wolkenhimmel und nen sternenhimmel, die sich abwechseln).

Kann mir vllt jmd sagen wie genau ich die User-Uhrzeit auslese und danach die Bilder anzeigen lasse? Wäre euch wirlich sehr verbunden!

Dankeschön schonmal im Vorraus!
danson
 
Denke für dich ist nur folgendes wichtig:

Code: 
// Aktuelles Datum mit Uhrzeit
var datum = new Date();
var stunden = datum.getHours();
if(hours >= 7 && hours < 22) {
  // Background wechseln bzw. eventuell css-Klasse des Bodys wechseln (Tag)
} else {
  // Background wechseln bzw. eventuell css-Klasse des Bodys wechseln (Nacht)
}
 
Hi Gilles,

super! Vielen Dank - das hat schonmal stark geholfen!!!

Hab grad gemerkt, dass es wohl am einfachsten ist, die gesamte CSS-Datei auszuwechseln, weil sich dann doch mehrere Elemente ändern. (-> eine CSS für Tagsüber - eine für Nachts) Geht das auch mit dem Script? (wenn ja - weiß jemand zufällig wie? --- hab in diversen Nachschlagewerken und auch im Netz nix dergleichen gefunden... :sad: )

Greets
 
Zuletzt bearbeitet:
danson schrieb:
Hi Gilles,

super! Vielen Dank - das hat schonmal stark geholfen!!!

Hab grad gemerkt, dass es wohl am einfachsten ist, die gesamte CSS-Datei auszuwechseln, weil sich dann doch mehrere Elemente ändern. (-> eine CSS für Tagsüber - eine für Nachts) Geht das auch mit dem Script? (wenn ja - weiß jemand zufällig wie? --- hab in diversen Nachschlagewerken und auch im Netz nix dergleichen gefunden... :sad: )

Greets
Zum Vergrößern anklicken....

Ja. Dafür muss das Script aber ausgeführt werden, wenn das Dokument noch nicht geladen wurde. Am besten so ein Konstrukt:
HTML: 
<head>
  <link rel="stylesheet" id="noScriptCss" href="main.css" />
  <script type="text/javascript">
// Aktuelles Datum mit Uhrzeit
var datum = new Date();
var stunden = datum.getHours();
// No Script Variante des CSS entfernen
var noScriptCss = document.getElementById("noScriptCss");
noScriptCss.parentNode.removeChild(noScriptCss);
if(hours >= 7 && hours < 22) {
   document.write("<link rel='stylesheet' href='tag.css' />");  
} else {
  document.write("<link rel='stylesheet' href='nacht.css' />");
}
  </script>
</head>

Sollte so funktionieren. habs jedoch nicht getestet.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben