Hintergrund mit CSS an einem bestimmten Datum ändern?

Question

Kann jemand den Hintergrund einer Website automatisch mit CSS an bestimmten Daten ändern? Wie Valentines, Ostern, Weihnachten usw.

Answer 1

Sie nicht in der Lage sein, es zu tun, nur mit CSS, aber sie konnte es JavaScript und CSS wie so kombiniert,

var checkDate=new Date(), 
today = new Date(); 
checkDate.setFullYear(2011,1,14); 

if (today.getTime() === checkDate.getTime()){ 
    document.getElementById("background").className += 'valentinesBackgroundStyle'; 
} 

http://jsfiddle.net/sH429/

Answer 2

Sie können dies tun mit CSS. Sie müssten dazu JavaScript verwenden.

Zum Beispiel Hintergrundfarbe rot am Valentinstag zu ändern:

var date = new Date(); 
if(date.getDate() == 14 && date.getMonth() == 1) { 
    document.body.style.background = "red"; 
} 

Answer 3

Sie werden entweder eine serverseitige Sprache wie PHP oder JavaScript für diese verwenden. Mit PHP, zum Beispiel, können Sie auf den Server zugreifen Datum/Uhrzeit mit date() und so etwas wie:

if(date('m/d') == '2/14')) 
    'get your girl a present, dude!'; 

Der Vorteil der serverseitigen Code ist, dass es für den Benutzer schneller ist. Der Nachteil ist, dass es das Datum und die Uhrzeit Ihres Servers ist, nicht der des Benutzers. So könnte man das Gleiche mit Javascript tun, etwa so:

var curtime = new Date(), 
    curday = curtime.getDate(), 
    curmonth = curtime.getMonth()+1; 

if(curmonth == 2 && curday == 14) 
    alert('better be quick'); 

So oder so funktionieren wird.

Zur Verdeutlichung hinzugefügt: Die oben genannten ermöglichen es Ihnen, den Tag zu überprüfen. Sie können das verwenden, um Ihrem HTML-Element eine CSS-Klasse hinzuzufügen, die Sie beispielsweise für diesen Tag vorbereitet haben. Sagen Sie es mit Javascript tun, dann würden Sie

$('#wrap').addClass('valentines'); 

anstelle des alert() oben schreiben. Dies wird die Klasse valentines zu der <div id="wrap"> hinzufügen - nur als ein Beispiel. Sie können dann mit dieser CSS-Klasse machen, was Sie wollen.

Edit: Ich verwendete jQuery im letzten Ausschnitt. Du kannst es auch mit Javascript alleine machen - das hat Loktar bereits in seiner Antwort hinzugefügt.