Verschiedene Stylesheets, abhängig von der Tageszeit

<script>
<!--
function getStylesheet() {
      var currentTime = new Date().getHours();
      if (0 <= currentTime&&currentTime < 5) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
      if (5 <= currentTime&&currentTime < 11) {
       document.write("<link rel='stylesheet' href='morning.css' type='text/css'>");
      }
      if (11 <= currentTime&&currentTime < 16) {
       document.write("<link rel='stylesheet' href='day.css' type='text/css'>");
      }
      if (16 <= currentTime&&currentTime < 22) {
       document.write("<link rel='stylesheet' href='evening.css' type='text/css'>");
      }
      if (22 <= currentTime&&currentTime <= 24) {
       document.write("<link rel='stylesheet' href='night.css' type='text/css'>");
      }
}

getStylesheet();
-->
</script>

<noscript><link href="main.css" rel="stylesheet"></noscript>

Benennen Sie Ihre CSS-Dateien entsprechend: night.css, day.css usw. Ein schöner Bonus ist, dass, da JavaScript die Zeit vom lokalen Rechner bezieht und nicht vom Server, den Benutzern das zeitabhängige Stylesheet basierend auf *ihrer* Zeit und nicht der des Servers serviert wird, der sich möglicherweise in einer völlig anderen Zeitzone befindet.

Wenn JavaScript im Browser deaktiviert ist, wird standardmäßig das main.css Stylesheet verwendet.

Kommentare

Euan

# 30. Mai 2010

abhängig, nicht ausstehend.

aber sehr nützlich

Antworten

Nicolas Bouliane

# 8. Juni 2010

Korrigieren Sie mich, wenn ich falsch liege, aber wäre es nicht viel angebrachter, PHP zu verwenden, da der Browser den Code nicht vom Server laden müsste? Außerdem würde es den Code vor dem Benutzer verbergen und die Magie bewahren!

Antworten

josh

Permalink zum Kommentar# 3. April 2011

Die Verwendung von PHP ist nur sinnvoll, wenn Sie die Zeit des Servers nutzen möchten. PHP kann nicht die Zeit des Benutzers abrufen, da der Browser keine Informationen auf diese Weise sendet. Wenn Sie Ihre Instanzen auf die Zeit des Benutzers basieren möchten, müssen Sie ein clientseitiges Skript anstelle eines serverseitigen verwenden.

(Macht Sinn, wenn man darüber nachdenkt: Das serverseitige Sprachdatum-Objekt würde das Datum/die Uhrzeit des Servers zurückgeben, während das clientseitige Sprachdatum-Objekt das Datum/die Uhrzeit des Clients zurückgeben würde)
Aaron Mason

Permalink zum Kommentar# 13. Dezember 2022
Es kommt darauf an, wie man es macht. Wenn Sie das Stylesheet über ein PHP-Skript laden, das es generiert, könnten Sie die Tageszeit mit new Date().getTime() übermitteln, daraus die Stunden berechnen (da es sich um die lokale Zeit des Clients handelt) und damit entscheiden, welches Stylesheet zurückgegeben werden soll.
```
document.write('<link rel="stylesheet" type="text/css" href="stylesheet.php?time=' + (new Date().getTime()) + '">');
```
Ein besserer Weg, der die serverseitige Leistung weniger beeinträchtigt, ist das Laden aller Stylesheets in einer einzigen Datei (da der Client sie für Sie zwischenspeichert) und die Verwendung einer CSS-Klasse am Body-Tag, um zu entscheiden, welche verwendet werden soll – dann verwenden Sie JS, um die erforderliche Klasse auszuwählen.

Attila Hajzer

# 6. Juli 2010

könnte man das auch mit der Auflösung machen. Wie je nach Auflösung dieses Stylesheet verwenden, anstatt dieses?

Antworten

Quka

Permalink zum Kommentar# 13. Juli 2012

Meinen Sie CSS Media Queries?

Billy Brown

# 19. Juli 2011

Wenn jemand während der Umstellung auf der Website ist, müssen dann die gesamten CSS-Dateien sowie die neuen Bilder (in den neuen CSS) neu geladen werden? Denn das sieht vielleicht nicht so gut aus.

Antworten

Patrick

Permalink zum Kommentar# 14. Januar 2015

Ja, es muss neu geladen werden, aber das geschieht nicht in Echtzeit. Das Theme wird also nach jeder Art von Aktualisierung der Seite geändert. Der Benutzer sieht die CSS-Änderung nicht, er sieht den neuen Stil, wenn die Seite geladen/neu geladen wird. Gruß.

Damien

# 23. August 2011

Sehr nützlich in der Tat. Ich habe normalerweise eine Option, mit der der Benutzer sein gewünschtes CSS auswählen kann, wenn er eingeloggt ist, aber das könnte sehr schön integriert werden. Danke!

Antworten

Poole Web Design

# 24. November 2011

Hallo, tolles kleines Skript. Ich möchte dem Body jedoch auch eine Klasse hinzufügen, indem ich


 if (0 <= currentTime&&currentTime  < 5) {
		  $('body').addClass('night');
       document.write("<link rel='stylesheet' href='night.css' type='text/css' >");
      }

Es fügt das Stylesheet hinzu, aber nicht die Klasse auf dem Body – irgendwelche Ideen?

Antworten

Easy Webs

# 28. November 2011

**HOCHSCHIEBEN**! Irgendwelche Ideen zu dem oben Genannten? Wäre für einige Leute unglaublich hilfreich, stelle ich mir vor.

Danke

Antworten

Travis

# 2. Dezember 2011

@Easy Webs, ich vermute, Ihr Skript wird ausgeführt, bevor das Body-Tag geladen wurde, sodass jQuery es nicht finden kann. Sie müssen diesen Code in ein Dokument packen, das bereit ist, oder ihn am Ende der Seite ausführen.

$(document).ready(function() { 

})

Antworten

Easy Webs

# 6. Dezember 2011

Hallo Travis,

Ja, das hat perfekt funktioniert – es war die Tatsache, dass es einfach das Body-Tag nicht finden konnte. Ich muss woanders schlechte Ratschläge bekommen haben, dass ich, um dies sofort ausführen zu lassen, auf das Dokument .ready verzichten könnte... aber es braucht dies, um das Element auf der Seite zu finden!

Vielen Dank, jetzt kann ich das Stylesheet wechseln und einige klassenspezifische Dinge tun, je nach Tageszeit... genial.

Paul

Antworten

e11world

# 10. April 2012

Das ist sehr großartig. Ich werde das definitiv für mein nächstes Projekt verwenden

Antworten

Matt Havoc

# 21. Juni 2012

Das ist großartig und sehr hilfreich, aber ich habe eine Frage: Wie würde ich es machen, damit die Zeit zur halben Stunde wechselt? Ich möchte, dass die Zeit um 17:30 Uhr wechselt, aber damit kann ich nur 17:00 oder 18:00 Uhr.

Antworten

Jass

Permalink zum Kommentar# 2. August 2019

Vielleicht mit getMinutes() im JS?

wolf

# 8. August 2012

Zusätzlich wäre es großartig, wenn jedes Stylesheet auch manuell ausgelöst werden könnte und die Wahl in einem Cookie gespeichert würde, der nach einer Sitzung abläuft. Wäre es sinnvoll, jedes document.write in eine eigene Funktion zu packen, die dann mit einem Button auf der Website ausgelöst werden kann und natürlich innerhalb der if-Klausel. Wie würde das aussehen? Jemand eine Idee? Ich bin nur ein Designer und kein Programmierer genug, um das richtig hinzubekommen...

Antworten

wolf

# 8. August 2012

habe diesen manuellen Wechsler gefunden (http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/) ... Können die beiden Ansätze kombiniert werden, was zu einem sehr nützlichen Skript führt, das das Stylesheet automatisch basierend auf der Tageszeit auswählt – aber es erlaubt, die automatische Wahl manuell zu überschreiben, indem ein Stylesheet (z. B. über ein Dropdown-Menü) auf der Website ausgewählt und diese Wahl für die Dauer der Browser-Sitzung in einem Cookie gespeichert wird?! Das wäre fantastisch!

Antworten

wolf

# 8. August 2012

@ Matt Havoc ...
Wie wäre es, die Minute des Tages zu berechnen? Angeblich hat ein Tag 1440 Minuten.

Kann jemand diesen Code überprüfen – würde das funktionieren?


      var currentDate = new Date();
      var currentMinute = (currentDate.getHours()  * 60) + currentDate.getMinutes();


      if (0 <= currentMinute&&currentMinute < 30) {
      document.write("<link rel='stylesheet' href='0_30.css' type='text/css'>");
      }
      if (30 <= currentMinute&&currentMinute < 60) {
      document.write("<link rel='stylesheet' href='30_60.css' type='text/css'>");
      }
      // you get the idea ... so we are wrapping it up for the rest of the time
      if (60 <= currentTime&&currentTime <= 1400) {
       document.write("<link rel='stylesheet' href='60_1440.css' type='text/css'>");
      }

Antworten

wolf

# 8. August 2012

ups ... Tippfehler

if (60 <= currentTime&&currentTime <= 1400) {

würde sein

if (60 <= currentMinute&&currentMinute <= 1400) {

natürlich auch ... ;)

Antworten

Matt Havoc

# 28. August 2012

@wolf: Vielen Dank, das hat genau das getan, was ich brauchte. Du rockst!

Antworten

Wolf

# 29. August 2012

@Matt Havoc – Gern geschehen. Freut mich, dass es geklappt hat ...

Antworten

Dima

# 5. September 2012

Ich liebe dich Mann :) Danke dafür!

Antworten

chand

# 27. November 2012

Ich möchte das tun, wenn Sie eingeloggt sind, dann sollte .css nicht wie zuvor sein. Denn ich möchte einige Admin-Optionen vor Besuchern verstecken und nur Admins anzeigen, wie ich diese Optionen gleichzeitig codiert habe. Wenn Sie also eine Idee haben, wie man das mit PHP oder JS oder nur mit CSS machen kann. Dann lösen Sie es bitte.

Antworten

Eric

# 20. Dezember 2012

Kennt jemand eine Möglichkeit, dies basierend auf dem Datum anstelle der Uhrzeit zu tun.
Zum Beispiel könnten Sie vom 20. bis 25. Dezember "christmas.css" anzeigen und dann für die folgende Woche zu "newyears.css" wechseln usw. Dies wäre eine großartige Möglichkeit, saisonale Elemente hinzuzufügen, ohne ständig auf dem Laufenden sein zu müssen.

Antworten

Peter

# 24. Januar 2013

Mir scheint, die Codebox ist leer? Bemerkte das noch jemand?

Antworten

Casa Malina

# 17. Juni 2013

Wow! Bestes Skript im Netz für zeitabhängige CSS!!

Antworten

Andrew

# 11. Juli 2013

Ich frage mich nur, wie man den Code schreiben würde, wenn wir *möchten*, dass die angezeigte Zeit zeitzonensensibel ist. Wenn zum Beispiel die Öffnungszeiten eines Geschäfts von 9-17 Uhr (PST) sind, dann könnte die Website anzeigen, ob das Geschäft geöffnet/geschlossen ist.

Jegliche Genialitätshilfe dazu ist sehr willkommen!

Viva CSS-Tricks!

Antworten

Zach

# 24. August 2013

Hallo, ich habe mich gefragt, wie ich dieses Skript für mein WordPress-Theme verwenden kann. Ich habe derzeit ein sehr helles und lebendiges Theme aktiviert und möchte, dass meine Leser nachts auch ein dunkles für die späte Lektüre haben. Danke für die Hilfe!

Antworten

Felix

Permalink zum Kommentar# 26. April 2017

Hallo, ich habe genau die gleiche Anforderung auf einer meiner Websites. Weiß jemand, wie man den Code in WordPress implementiert?
Ryo

Permalink zum Kommentar# 10. November 2017

Das würde ich auch gerne wissen.
Ryo

Permalink zum Kommentar# 12. November 2017

Ich habe endlich dieses Plugin gefunden und es funktioniert perfekt, man kann sogar Stunden, Tage, Monate usw. wählen (aber es scheint kein Child-Theme zu unterstützen): https://wordpress.org/plugins/wp-change-template/

Chard

# 26. November 2013

Hallo, toller Snippet hier. Aber ich habe eine Frage: Was ist, wenn ich den obigen Snippet zum Laden von CSS an Wochentagen verwende, aber ein anderes CSS laden möchte, wenn es an Wochenenden (Samstag und Sonntag) ist, wie mache ich das?

Antworten

Ksenia

Permalink zum Kommentar# 17. Juli 2014

bereits hier abgedeckt hier

Ryô

# 20. April 2014

Danke, ich habe nach so etwas gesucht, sehr nützlicher Code.

Antworten

Geo

# 1. Mai 2014

Das ist großartig. Aber was passiert, wenn der Besucher sein PC im 12-Stunden-Format hat?

Antworten

Jonas

# 23. Dezember 2014

Wäre es möglich, verschiedene CSS-Dateien basierend auf dem Dateinamen in der URL zu laden? Wenn ja, wie? Ich suche seit Wochen nach einer Lösung, leider bin ich ein JS-Noob. : (

Bsp.

http://www.xxx.com/ABC.asp?blah-blah
Lädt ABC.css

http://www.xxx.com/XYZ.asp?blah-blah
Lädt XYZ.css

Antworten

Emilio

# 23. März 2018

Ich brauche Hilfe, ich möchte, dass die Stylesheets täglich wechseln, wie kann ich das tun? Ich wäre dankbar für die Hilfe, danke.

Antworten

Cr3At0r

# 2. August 2018

Wie wechselt man zwischen Nacht und Tag zu einer bestimmten Zeit zwischen 2 Bildern (Sonnenaufgang; Sonnenuntergang)?
Es wechselt, aber von 0:00-12:00
Wie macht man es von 7:00 bis 19:00 Uhr (erstes Bild) und dann von
19:00 Uhr bis 7:00 Uhr (zweites Bild) wieder?

var current= new Date()
var day_night=current.getHours()
if (day_night<=12)
document.write("”)

else
document.write(“”)

Antworten

MARCO A GARCIA VILLEGAS

# 12. Februar 2019

Beste Lösung aller Zeiten!!! Danke Mann

Antworten

Aaron Mason

# 13. Dezember 2022

In der heutigen Zeit halte ich es für eine bessere Lösung, alle Stile in einer Datei zu haben und dann eine Klasse für body zu verwenden, um die für die Tageszeit festgelegte Stilmenge auszuwählen. Es würde auch keine Tricks erfordern, um einfach ein Standard-Stylesheet zu haben, wenn JavaScript deaktiviert ist.

styles.css

body.night {
}
body.night h1 {
}
body.day {
}
body.day h1 {
}
/* and so on and so on */

page.html

<html>
<head>
    <link rel="stylesheet" href="styles.css" type="text/css" />
    <script type="text/javascript">

function chooseBodyClass()
{
    document.body.classList.remove('night', 'day', 'evening', 'morning')
    let hour=new Date().getHours();
    switch (hour)
    {
        case 0: case 1: case 2: case 3: case 4: case 22: case 23: case 24:
            document.body.classList.add('night');
            break;
        case 5: case 6: case 7: case 8: case 9: case 10:
            document.body.classList.add('morning');
            break;
        case 11: case 12: case 13: case 14: case 15:
            document.body.classList.add('day');
            break;
        case 16: case 17: case 18: case 19: case 20: case 21:
            document.body.classList.add('evening');
            break;
    }
}

    </script>
<body class="day">
<!-- page thingies go here, obviously - change the class above to choose the "default" time of day -->
</body>
</html>

Antworten

Kommentare

Hinterlassen Sie eine Antwort Antwort abbrechen