Grafik datumsabhängig anzeigen 01 eine von 2 Grafiken
Dieses JavaScript vergleicht das Systemdatum und Ihre Vorgabe für den Stichtag. Bis zu einem bestimmten Datum soll Grafik A angezeigt werden. Danach soll automatisch die Grafik B angezeigt werden.
|
|
Eine von 2 Grafiken datumsabhängig anzeigen
Der Einsatz dieses Codeschnipsels erspart dem Webmaster die termingerechte Überarbeitung einer Webseite, weil die Grafik vom Script beim Einlesen der Seite bestimmt wird. Ein Austauschen der Grafik "von Hand" für abgelaufene Termine entfällt.
(Anzeige nach Ablauf des Datum)
(Anzeige vor Ablauf des Datums)
Die Funktion DatumGrafik01() zeigt eine von 2 Grafiken abhängig vom Stichtag des Datums an. Ich wende diese Funktion z.B. in meiner Sitemap an, um neue Beiträge zu kennzeichnen.
Dieses Script ermittelt aus dem Systemdatum und dem vorgegebenn Stichtag die Differenz. Das Resultat wird eine positive Zahl, eine negative Zahl oder Null sein. Abhängig davon, wird entweder Grafik A oder Grafik B angezeigt.
Grafik x vor Stichtag - diese Info ist bereits älter
Grafik x vor Stichtag - diese Info ist bereits älter
Grafik y nach Stichtag - diese Info ist brandneu
Grafik y nach Stichtag - diese Info ist brandneu
Grundlage der Berechnung
Information einblenden / ausblenden
Grundlage für dieses Beispiel ist die Berechnung des Abstandes zwischen 2 Datumswerten. Nichts anderes also als eine arithmetische Kalkulation und ein späterer Vergleich mit einer Konstanten (hier: Ist das Ergebnis gößer oder kleiner als Null?). Das hört sich nach viel Mathematik an, ist aber halb so wild. Ein Datumswert wird von einem andern Datumswert subtrahiert. Vereinfacht:
var Differenz = DatumZukunft - DatumHeute
Zwei Datumswerte subtrahieren / addieren in JavaScript
var DatumHeute = new Date()
var DatumVergleich = new Date(2015,11,24) // 24.12.2015 Monatswerte 0-11
var Differenz01 = DatumVergleich.getTime() - DatumHeute.getTime()
var Differenz02 = Differenz01 / 86400000
var Differenz03 = Math.ceil( Differenz01 / 86400000 )
Differenz01 entspricht Abstand in Millisekunden
Differenz02 entspricht Abstand in Tagen
Differenz03 entspricht Abstand in Tagen gerundet
Ein so berechneter Differenzwert kann dann für einen Vergleich (if) eingesetzt werden. Man könnte natürlich auch direkt abfragen "ist DatumVergleich größer als DatumHeute". Der Rechenweg über den Differenzwert lässt aber eine spätere Erweiterung zu, wenn man zusätzlich unterscheiden will "ist der Termin um 10 Tage überschritten?", "steht der Termin in 20 Tagen an?", ...
Funktion für dieses Anwendungsbeispiel
Berechnung des Abstandes zwischen 2 Datumswerten und dann eine entprechende Grafik anzeigen. Die Datenquelle für die beiden Grafiken werden zwei Variablen zugeordnet. Dort wird der HTML-Code für die Grafiken eingetragen:
var image01 = 'HTML-Code für Grafik Nr. 1'
var image02 = 'HTML-Code für Grafik Nr. 1'
var image01 = '<img src="list01.gif" width="16" height="16" border="0" alt="">'
var image02 = '<img src="list02.gif" width="16" height="16" border="0" alt="">'
Dort wo die Grafik (eine der beiden) angezeigt werden soll, tragen Sie den JavaScript-Funktionsaufruf in Ihre Seite ein. Der Funktion werden die Parameter für den Stichtag übergeben.
Syntax: Numerische Einträge durch Komma trennen: DatumGrafik01(Tag,Monat,Jahr)
<script type="text/javascript" language="JavaScript">
<!-- Begin
DatumGrafik01(10,5,2007);
// End -->
</script>
Demo
Notierung im Body-Bereich der HTML-Seite (für die erste Grafik):
<script type="text/javascript" language="JavaScript">
<!-- Begin
DatumGrafik01(25,12,2010);
// End -->
</script>
Beispiel
Sie haben mehrere Grafiken zur Verfügung die auf Ihrer Seite die Aktuallität des Beitrags oder z.B. den Zeitraum für einen Sonderrabatt anzeigen sollen. Sie entscheiden sich für die Grafik 1 + 3 (später mehr zur Einbindung einer 3. Grafik).
Grafik 1 Grafik 2 Grafik 3 Grafik 4
var image01 = '<img src="grafik1.gif" width="25" height="25" border="0" alt="">'
var image02 = '<img src="grafik3.gif" width="25" height="25" border="0" alt="">'
Beim Einsatz der Funktion mit den Parametern "10,5,2007" ...
<script type="text/javascript" language="JavaScript">
<!-- Begin
DatumGrafik01(10,5,2007);
// End -->
</script>
... wird bis zum 10.5.2007 die Grafik 1 angezeigt und ab dem 11.5.2007 die Grafik 3 angezeigt. Das könnte dann so aussehen:
|
Spaltenüberschrift
Vorteilhaft wenngleich gewöhnen ist, wie glauben dass wie wenn glauben vorhandene wiewohl gratulieren Stromleitungen wobei gratulieren genutzt wohingegen grenzen werden zumal haben können, halten also aber heiraten keine allein helfen neuen als helfen Kabel anstatt interessieren verlegt ausser kümmern werden
|
|
Spaltenüberschrift
Vorteilhaft wenngleich gewöhnen ist, wie glauben dass wie wenn glauben vorhandene wiewohl gratulieren Stromleitungen wobei gratulieren genutzt wohingegen grenzen werden zumal haben können, halten also aber heiraten keine allein helfen neuen als helfen Kabel anstatt interessieren verlegt ausser kümmern werden
|
| bis zum 10. Mai Kennzeichnung als Neu |
|
nach dem 10. Mai Kennzeichnung als Info |
Einsatzbereiche
Sie können diese Funktion einsetzen, um einen grafischen Marker oder eine größere Grafik datumsabhängig anzeigen zu lassen. Bis zu dem Stichtag soll zuächst Grafik A angezeigt werden. Danach soll Grafik B angezeigt werden. Das geschieht mit dieser Funktion automatisiert. Das erspart dem Webmaster die dauernde / termingerechte Überarbeitung der Seite. Nichts wäre schlimmer als das, vermittelt es dem Seitenbesucher doch den Eindruck, das sich niemand kümmert und die Webseite nicht regelmäßig aktualisiert wird.
Die Verwendung ist natürlich nicht auf die Darstellung innerhalb einer Sitemap oder zur Kennzeichnung eines neuen Artikels beschränkt.
a) neue Artikel werden wie gewünscht über einen festen Zeitraum gekennzeichnet.
b) Uralt-Artikel erscheinen nicht nach 4 Wochen immer noch mit einem blinkenden 'new'.
c) Grafiken symbolisieren den aktuellen Stand
Mitarbeiter sind zum Team-Training bis zum 17.03.2011: DatumGrafik01(17,3,2011)
Anmeldung zur Schau bis zum 20.04.2011: DatumGrafik01(20,4,2011)
wir renovieren bis zum 01.02.2011: DatumGrafik01(1,2,2011)

Grafik datumsanhängig 03 - Grafik + Text
Grafik datumsanhängig 04 - Grafik + Datum + Text
Grafik + Text - Liste der Termine mit Grafik - jahresübergreifend
Liste der Termine jahresübergreifend - Kalenderblatt + Tagescounter + Text

|