Schulferien-Text01
 HomeDatum • datumsabhängige Texte Demo01  Demo02  Quelltext   DOWNLOAD 

Datumsabhängige Textanzeige 01 - 7 Texte

Das Script hatte ich ürsprünglich für eine Schulhomepage geschrieben. Es sollte die Ferien ankündigen (Countdown) oder die Projektwoche begleiten und für unterschiedliche Datumsbereiche entsprechende Texte darstellen. Es ist natürlich für jeden anderen Event ebenso einsetzbar.
date() datum counter text einblendung tageszähler

Event begleitender Text mit 7 datumsabhängigen Anzeigen

Das Anzeigemodul generiert abhängig von Start- und Enddatum 7 unterschiedliche Textanzeigen. Das Script soll durch die automatisch formulierten Texte der Webseite einen 'Hauch' von Aktualität verleihen und den Webmaster entlasten. Aktionen und Events ankündigen, redaktionell begleiten und Resümee anzeigen.

Anzeige Live-Demo: StartDatum: 05.12.2015 , EndeDatum: 10.12.2015

Aktion vom 05. Dezember bis 10. Dezember

Demo 02 für dieses Modul ansehen (Ankündigung Adventskalender)


Bei diesem Modul eingesetzte Techniken

Datumsobjekten Werte zuordnen, Zeitwerte ändern
Datumswerte untersuchen, Differenzen ermitteln und vergleichen
Texte in einem Array ablegen und gezielt auswählen
Texte mit "document.getElementById()" austauschen



Anzeigemodul mit 7 unterschiedlichen Anzeigen + Counter





Die datumsabhängigen Texte 1 - 7:

Nr. Zeitraum Vom JavaScript erzeugte Anzeige
1 vorher Schon bald, am X gehts los. Nur noch X Tage bis zum Start. Die Aktion läuft über einen Zeitraum von X Tage(n). Text mehr Text noch mehr Text. Noch ein etwas längerer Text.
2 2 Tage vorher Nur noch 2 Tage bis zum Start. Übermorgen, am X gehts los. Text mehr Text noch mehr Text. Noch ein etwas längerer Text.
3 1 Tag vorher Nur noch 1 Tag bis zum Start. Morgen, am X gehts los. Text mehr Text noch mehr Text. Noch ein etwas längerer Text.
4 Starttag Heute, am X gehts los! Endlich, auf diesen Tag haben wir lange gewartet. Der Event ist am X beendet. Text mehr Text noch mehr Text. Noch ein etwas längerer Text.
5 während Am X war der Startschuss für die Aktion die nun seit X Tag(en) läuft. Die Aktion wird am X enden. Text mehr Text noch mehr Text. Noch ein etwas längerer Text.
6 Endtag Heute, am X ist der letzte Tag der Aktion, die am X startete. Text mehr Text noch mehr Text. Noch ein etwas längerer Text.
7 nachher Die Aktion ist seit dem X beendet. Sie begann am X und lief über einen Zeitraum von X Tage(n). Text mehr Text noch mehr Text. Noch ein etwas längerer Text.


Ich könnte mir einen Einsatz des Moduls zur Anzeige von 7 Texten vorstellen für

Querverweis:

Das Modul "datumsabhängige Anzeige 02" wäre (anders als dieses Modul "datumsabhängige Anzeige 01") auch für einzelne Tage einsetzbar. Wenn Anfangs- und Enddatum gleich sind, erkennt das Modul "datumsabhängige Anzeige 02" diese Situation und die Ausgabe der Texte wird entsprechend angepasst.

Modul datumsabhängige Anzeige 02 (7 Texte) anzeigen



Notwendige Eckdaten: 2 Datumswerte

Mit lediglich 2 Eintägen erzeugt dieses Modul eine Reihe von 7 unterschiedlicher Textanzeigen die von diesen beiden Eckdaten abhängig sind. Ein Counter stellt bei einigen Anzeigen einen Bezug zum Start- oder Enddatum her.

Die 2 Variablen mit Beispiel-Einträgen:
var StartDatum = new Date("december 5, 2015");   // erster Tag
var EndeDatum = new Date("december 10, 2015");   // letzter Tag
Beispiel für Textanzeigen:

(während)
Am 30. März 2008 war der Startschuss für die Osterferien die nun schon seit 9 Tagen laufen. Die Ferien werden am 17. März 2008 enden. Viel Spaß während der unterrichtfreien Tage und außerdem wünschen wir Euch tolles Ferienwetter.

(vorher)
Schon bald, am 17. Juni 2008 beginnt die Europameisterschaft mit dem Eröffungsspiel Niederlande-Frankreich. Nur noch 23 Tage bis zum Start. Die Spiele läufen über einen Zeitraum von 19 Tage(n). Mal sehen, möglicherweise sind wir im Endspiel.

(vorher)
Demnächst, am 23 August 2008 beginnt unser diesjähriges Tennisturnier. Nur noch 51 Tage bis zum Start. das Turnier läuft über einen Zeitraum von 12 Tage(n). Wir freuen uns über interessierte Zuschauer täglich ab 17 Uhr in der Tennishalle Feldstraße.

(nacher)
Unser Mühlenfest im Verband des Mühlenvereins Selfkant ist seit dem 16.05.2014 beendet. Es begann am 14.05.2014 und lief über einen Zeitraum von 3 Tage(n). Text mehr Text noch mehr Text. Noch ein etwas längerer Text.


Aufwand zum Einbau in Ihre Seite

1) kopieren Sie das Script in den Head-Bereich Ihrer Seite (siehe Textdatei)
2) andern Sie die Eintragungen der beiden Eckdaten
3) Notieren Sie den HTML-Code im Body-Bereich Ihrer Seite
4) testen Sie die Anzeige mit unterschiedlichem Datum   Info einblenden

Kurzinfo JavaScript in ein HTML-Dokument 'einbauen'




Tipp zum Eintrag der Eckdaten

Beim Eintrag der beiden Eckdaten achten Sie bitte auf die Schreibweise. Die Reihenfolge ist:
  1. Monatsbezeichnung
  2. Tag
  3. Komma
  4. vierstellige Jahreszahl
var xxxx = new Date("February 5, 2008");

Englische Schreibweise des Monatsnamens beachten (im Quelltext notiert):

January, February, March, April, May, June, July, August, September, October, November, December

var StartDatum = new Date("december 5, 2015");   // erster Tag
var EndeDatum = new Date("december 10, 2015");   // letzter Tag



CSS-Anweisungen für die Anzeigebox

Hier mit einer Notierung für die Hintergrundgrafik event-550.png

Die Grafik (Darstellung hier mit Rand) ist im Download enthalten)



<style type="text/css">
<!--

#AnzeigeBox {
position: relative;
left: 0px;
top: 0px;
width: 550px;
height: 130px;
margin: 0px;
padding: 0px;
background: url(event-550.png);
border: 1px solid #4B4B4B;
}

#AnzeigeText {
position: absolute;
left: 15px;
top: 15px;
width: 390px;
height: 110px;
margin: 0px;
padding: 0px;
font-family: Verdana,sans-serif;
color: #2F2F2F;
font-size: 12px;
font-weight: normal;
text-align: left;
line-height: 140%;
overflow: hidden;
}

-->
</style>




Das könnte Sie auch interessieren: