 Grafik datumsabhängig anzeigen 04 eine von 2 Grafiken + Text
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 + Datum + Text
Datumsabhängie Grafikanzeige + Textzeile mit Datum im Format "TT.MM.JJJJJ". Der Einsatz dieses Codeschnipsels erspart dem Webmaster die termingerechte Überarbeitung einer Webseite, weil die Grafik (eine von zwei) vom Script beim Einlesen der Seite bestimmt wird.
 TT.MM.JJJJ Text hinter der Grafik (Anzeige für abgelaufenes Datum)
 TT.MM.JJJJ Text hinter der Grafik (Anzeige für bevorstehendes Datum)
Hier wird zusätzlich das eingetragene Datum gelistet!
Für die Entscheidung welche der beiden Grafiken angezeigt werden soll, werden der Funktion Angaben für den Stichtag als Parameter übergeben.
DatumGrafik04(6,5,2020,'Sommerfest der Jugendabteilung');
Hier im Beispiel "Grafik datumsabhängig anzeigen 04" werden diese Angaben als Datumswert im Format "TT.MM.JJJJJ" zusätzlich angezeigt. Das JavaScript sorgt für eine zweistellige Anzeige von Tag und Monat.
Beispiel Terminliste
|
Beispiel Updates der Webseite
|
Mit der Einbeziehung des Datums eignet sich das Beispiel "Grafik datumsabhängig anzeigen 04" sehr gut für eine übersichtliche Terminliste (Vereins- oder Schulseite), eine Liste der letzen Updates aber auch immer noch für eine Sitemap.
siehe auch: Grafik datumsanhängig 03  Grafik + Text
Die Funktion DatumGrafik04() zeigt eine von 2 Grafiken abhängig vom Stichtag des Datums an. Ich wende eine ähnliche Funktion 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
Zusätzlich wird der Text, der hinter der Grafik angezeigt werden soll, der Funktion als Parameter übergeben. So lässt sich z.B. eine Terminliste oder eine Sitemap mit Grafiken markieren, welche die Aktuallität symbolisieren.
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?", ...
Im JavaScript:
Das Script entscheidet an Hand der von Ihnen eingetragenen Datumswerte, welche Grafik später angezeigt werden soll. Die Quelle der beiden Grafiken legen Sie selbst fest. 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) und der Text angezeigt werden soll, tragen Sie den JavaScript-Funktionsaufruf in Ihre Seite ein. Der Funktion werden die Parameter für den Stichtag und den Text übergeben.
Syntax: Numerische Einträge durch Komma trennen: DatumGrafik04(Tag,Monat,Jahr,Text)
<script type="text/javascript" language="JavaScript">
<!-- Begin
DatumGrafik04(10,5,2007,'Text');
// End -->
</script>
Demo
Notierung im Body-Bereich der HTML-Seite (für die erste Grafik):
<script type="text/javascript" language="JavaScript">
<!-- Begin
DatumGrafik04(25,12,2010,'Halbmarathon in Köln Porz');
// End -->
</script>
Notierung im Body-Bereich:
<script type="text/javascript" language="JavaScript">
<!-- Begin
DatumGrafik04(25,12,2010,'Halbmarathon in Köln Porz');
DatumGrafik04(25,12,2015,'Radtourenfahrt nach Minden');
DatumGrafik04(6,5,2020,'Sommerfest der Jugendabteilung');
DatumGrafik04(21,3,2060,'Jahresausflug nach Bingen');
// End -->
</script>
Grafik datumsanhängig 01 - nur Grafik
Grafik datumsanhängig 03 - Grafik + Text
Grafik + Text - Liste der Termine mit Grafik - jahresübergreifend
Liste der Termine jahresübergreifend - Kalenderblatt + Tagescounter + Text
|
Home • Datum • Grafik datumsanhängig 04
Demo
Download