JavaScriptTimer: Unterschied zwischen den Versionen

Version vom 15. März 2018, 13:50 Uhr

Manchmal kann es nützlich sein bestimmte Inhalte nur innerhalb eines definierten Zeitraums auf einer GCMS-Seite anzeigen zu lassen. Hierzu kann man sich eines kleinen JavaScripts bedienen. Hierzu kann folgender Code innerhalb eines GCMS-Text Elements genutzt werden:

<keinbr />

<script>

var startDate = new Date(2015,10,3,10,30,0,0); // 03.11.2015, 10:30 Uhr

var endDate = new Date(2015,10,3,10,40,0,0); // 03.11.2015, 10:40 Uhr

var today = new Date();

if (today.getTime() >= startDate.getTime() && today.getTime() <= endDate.getTime()) {

document.getElementById('verstecktesElement').style.display = 'block';

}

</script>

Das "<keinbr/>" führt in GCMS-Text dazu, dass Zeilenbrüche über die Tastatur ignoriert werden.

Der JavaScript Code enthält zwei Variablen "startDate" und "endDate". Das erstere legt das Startdatum fest, ab dem das Element angezeigt wird und das letzte das Enddatum, bis wann es angezeigt wird. Dabei gibt es einige Besonderheiten der JavaScript Date Funktion.

Das Format ist folgendes: Date(Jahr,Monat,Tag,Stunde,Minuten,Sekunden,Millisekunden). Bei dem Monat muss man jeweils eins abziehen, da JavaScript bei 0 anfängt. Der Dezember ist so bspw. nicht 12 sondern 11. Auf diese Weise kann man die beiden Daten bestimmen. Das Script überprüft dann bei jedem Aufruf, ob das aktuelle Datum innerhalb dieser beiden genannten liegt (siehe if-Teil) und blendet dann das Element mit der ID "verstecktesElement" ein. Dieses muss dann auch im GCMS-Text definiert sein. Hierzu kann folgender Code genutzt werden:

<div id="verstecktesElement" style="display: none;">Hier ist Inhalt, der nur zu einer bestimmten Zeit angezeigt wird.</div>

Der Inhalt ist dabei frei wählbar und kann selbst weiteren beliebigen HTML-Code enthalten. Wichtig ist nur, dass der JavaScript-Teil erst nach dem Element im Inhalt erscheint. Für eine flexiblere Verwendung empfiehlt es sich daher den Script-Teil in ein weiteres GCMS-Text Element auszulagern.

Hier zu (1) einen neuen GCMS-Text hinzufügen. Dann (2) das neue GCMS-Text Feld durch anklicken und ziehen unter das bereits bestehende ziehen. Letztlich (3) das Script einfügen und speichern. Danach erscheint der Inhalt des "versteckten Elements" nur zur zuvor definierten Zeit.