Countdown (Zähler) - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

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.
Download Button
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>
<script>
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>
Noch * Stunden bis zum 24 Dezember 2025 / 16:30 Uhr.
Code für den <BODY> Bereich
<div align="center" style="font-size: 16px; font-weight: bold; color: #000;">
Noch <span id="stunden">*</span> Stunden
bis zum 24 Dezember 2025 / 16:30 Uhr.
<script>
// Countdown - Anzeige der verbleibenden Stunden
// Die Monatsnamen in englisch eintragen (Monatsname, Tag, Jahr, 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>
Noch Tage bis Weihnachten 2025
Code für den <BODY> Bereich
<div align="center" style="font-size:16px; font-weight:bold; color:#000;">
Noch
<script>
// Die Monatsnamen in englisch eintragen (Monatsname, Tag, Jahr, 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>
Noch Tage bis zum Jahr 2025.
Code für den <BODY> Bereich
<div align="center" style="font-size: 16px; font-weight: bold; color: #000;">
Noch
<script>
// Countdown
// Achtung: amerikanische Notation des Datums
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>
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.
Download Button
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
<script src="wsX5Obj/Obj100_2/digitime.js"></script>
Code für den <BODY> Tag
onload="getTime(); window.setTimeout('getSecs()',1);"

Wer nicht mit Website X5 arbeitet:
<body onload="getTime(); window.setTimeout('getSecs()',1);">
Code für den <BODY> Bereich
<div align="center">
<table>
<tr>
<td align="center" style="font-size: 14px; font-weight: bold; color: #000; padding-top: 5px;">
Noch &nbsp;
</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 oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt