Countdown (Zähler)

Scripte > Snipped

Weiterleitung zu einer anderen Webseiten

Möchte man einen gewissen Zeitpunkt attraktiv machen, kommt man an einen Countdown nicht vorbei.

Hier eine kleine Auswahl Analog und Digital.

Für die Datumsformate haben wir hier eine hilfreiche Liste für das JavaScript Date Object bereitgestellt.

Analoger Countdown

Dieser ist einfach gehalten und kann textlich angepasst werden. Einfach einen Tag nach dem Stichtag als Zieldatum eingeben und los geht die Zählung. Die Textgröße und -farbe können entsprechend im HTML-Code der Homepage angepasst werden.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken. HTML-Code in den BODY-Bereich <body>...</body> der aufrufende Datei einfügen und Textbereiche sowie das Datum entsprechend anpassen. Fertig

Eine demo.html ist jeweils beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

x runter geladen

Code für den <BODY> Bereich

<div align="center"

id="Obj100_1" style="font-family: tahoma; font-size: 14px; color: #ff0000; font-weight: bold;">

</div>

var initi = window.setInterval ('downcount()', 1000);
var text = 'Einen Moment bitte, Du wirst ';
// Sekunden eintragen
var zahl = 180;
// Umleitungsseite eintragen
var dokument="wsx5sys06.php";
function downcount() {

zeige = text + 'in ' +zahl+ ' Sekunden zu unserem Gästebuch weitergeleitet';
window.status = zeige ;
// für den Internet Explorer
document.all['Obj100_1'].innerHTML = zeige ;
// für die neuen Netscape Versionen
document.getElementById('Obj100_1').innerHTML = zeige ;
zahl --;
if (zahl < 0 ) {

location.href=dokument;

}

</script>

Nach dem <BODY> Tag

Noch * Stunden bis zum 24 Dezember 2025 / 16:30 Uhr.

Code für den <BODY> Bereich

Noch <span id="stunden">*</span> Stunden
bis zum 24 Dezember 2025 / 16:30 Uhr.
<script>

// Countdown - Anzeige der verbleibenden Stunden
// Achtung: amerikanische Notation des Datums und der Uhrzeit
var end = new Date('December 24, 2025 16:30:00');
var count = Math.floor(end.getTime() - new Date().getTime());
if (count > 0) {

document.getElementById('stunden').innerHTML = Math.floor(count/1000/60/60);

}

</script>

</div>

Nach dem <BODY> Tag

Noch Tage bis Weihnachten 2025

Code für den <BODY> Bereich

Noch
<script>

// Achtung: amerikanische Notation des Datums und der Uhrzeit
var Ereignistag = new Date("December 24, 2025 00:00:00 GMT");
var d=new Date();
var zaehler=Math.floor((Ereignistag.getTime()-d.getTime())/1000);
zaehler=Math.floor(zaehler/(60*60*24));
document.write(zaehler);

</script>
Tage bis Weihnachten 2025

</div>

Nach dem <BODY> Tag

Noch Tage bis zum Jahr 2025.

Code für den <BODY> Bereich

Noch
<script>

// Countdown
// Achtung: amerikanische Notation des Datums und der Uhrzeit
var eventdate = new Date("January 1, 2025 00:00:00 GMT");
var d=new Date();
var count=Math.floor((eventdate.getTime()-d.getTime())/1000);
count=Math.floor(count/(60*60*24));
document.write(count);

</script>
Tage bis zum Jahr 2025.

</div>

Nach dem <BODY> Tag

Digitaler Countdown
Zur Ausführung dieses Skriptes wird neben dem HTML-Code selbst auch ein Javascript-Aufruf im Head-Bereich und ein Startcode innerhalb des Body-Tags benötigt. Form, Farbe und auch die Digits können der Homepage angepasst werden. Dazu haben wir im Hauptverzeichnis "wsX5Obj100_2" mehrere Digit_ Verzeichnisse bereits hinterlegt. Zur Änderung der Digits muss in der Javascript-Datei "digitime.js" und Html-Code das Verzeichnis entsprechend angepasst werden. Voreingestellt ist das Verzeichnis "digi_yellow".

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. Javascript-Code in den HEAD-Bereich <head>....</head>, START-Code in den Bodytag <body onload="..."> und

HTML-Code in den BODY-Bereich <body>....</body> der aufrufende Datei einfügen.

Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.

x runter geladen

Noch

[Tage : Stunden : Minuten : Sekunden] bis zum neuem Jahr.

Digits für den Countdown haben wir hier bei den Digitaluhren zum Download bereit gestellt

Code für den <HEAD> Bereich

Vor dem </HEAD> Tag

Code für den <BODY> Tag

onload="getTime(); window.setTimeout('getSecs()',1);"

Wer nicht mit Website X5 arbeitet:

Innerhalb des <BODY> Tag

Code für den <BODY> Bereich

<table>

<tr>

<td align="center" style="font-size: 14px; font-weight: bold; color: #000; padding-top: 5px;">

Noch  

</td>

<td bgcolor="black" valign="bottom" width="230" height="25">
<img height=21 src="wsX5Obj/Obj100_2/digi_yellow/digi0.gif" width=16 name=x>
<img height=21 src="wsX5Obj/Obj100_2/digi_yellow/digi0.gif" width=16 name=a>

<img height=21 src="wsX5Obj/Obj100_2/digi_yellow/digi0.gif" width=16 name=b>

<img height=21 src="wsX5Obj/Obj100_2/digi_yellow/digi_dp.gif" width=9 name=c>
<img height=21 src="wsX5Obj/Obj100_2/digi_yellow/digi0.gif" width=16 name=y>
<img height=21 src="wsX5Obj/Obj100_2/digi_yellow/digi0.gif" width=16 name=z>
<img height=21 src="wsX5Obj/Obj100_2/digi_yellow/digi_dp.gif" width=9 name=cz>
<img height=21 src="wsX5Obj/Obj100_2/digi_yellow/digi0.gif" width=16 name=d>
<img height=21 src="wsX5Obj/Obj100_2/digi_yellow/digi0.gif" width=16 name=e>
<img height=21 src="wsX5Obj/Obj100_2/digi_yellow/digi_dp.gif" width=9 name=f>
<img height=21 src="wsX5Obj/Obj100_2/digi_yellow/digi0.gif" width=16 name=g>
<img height=21 src="wsX5Obj/Obj100_2/digi_yellow/digi0.gif" width=16 name=h>

</td>
<td align="center" style="font-size: 14px; font-weight: bold; color: #000; padding-top: 5px;">

[Tage : Stunden : Minuten : Sekunden] bis zum neuem Jahr.
</td>

</tr>

</table>

</div>

Nach dem <BODY> Tag

» nach oben «