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, Digital und auf Flash.
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.
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 eintragenvar zahl = 180;// Umleitungsseite eintragenvar dokument="wsx5sys06.php";function downcount(){
zeige = text + 'in ' +zahl+ ' Sekunden zu unserem Gästebuch weitergeleitet';window.status = zeige ;// für den Internet Explorerdocument.all['Obj100_1'].innerHTML = zeige ;// für die neuen Netscape Versionendocument.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> Stundenbis 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 Datumsvar 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".
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.
Noch |
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
[Tage : Stunden : Minuten : Sekunden] bis zum neuem Jahr. |
Code für den <HEAD> Bereich
<script type="text/javascript" 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" style="font-size: 14px; font-weight: bold; color: #000;">
<table>
<tr>
<td>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>[Tage : Stunden : Minuten : Sekunden] bis zum neuem Jahr.</td>
</tr>
</table>
</div>
Flash Countdown
Zur Ausführung dieses Skriptes wird der Adobe Flashplauer benötigt, der bei fast jedem Nutzer bereits installiert ist. Je nach Einstellung im Browser muss dieser für das Skript (oder alle Skripte) zugelassen werden.
Zur Ausführung dieses Skriptes wird der Adobe Flashplauer benötigt, der bei fast jedem Nutzer bereits installiert ist. Je nach Einstellung im Browser muss dieser für das Skript (oder alle Skripte) zugelassen werden.
Auch hier kann Form, Farbe des Skripts der Homepage angepasst werden, dazu die Hinweise beim Skript beachten.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren.
Jeweiligen 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 nicht durch einen Doppelklick ausgeführt werden.
In diesen beiden Beispielen ist der Countdown auf den
31.12.2022 18:00 eingestellt:
In diesen beiden Beispielen ist der Countdown auf den
31.12.2018 18:00 eingestellt:
Code für den <BODY> Bereich
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"width="280" height="42" id="countdown_h"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="wsX5Obj/Obj100_3/countdown_h.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="flashvars" value="c=000000&j=2022&m=12&t=31&std=18&min=00&meinText=Die Zeit ist abgelaufen!" /><embed src="wsX5Obj/Obj100_3/countdown_h.swf"flashvars="c=000000&j=2020&m=12&t=31&std=18&min=00&meinText=Die Zeit ist abgelaufen!"quality="high" wmode="transparent" width="300" height="42" name="countdown_h" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
Die Variablen:
Datei = "countdown_h.swf" für horizontal oder "countdown_v.swf" für vertikal
c = Schriftfarbe (000000) ohne das Gatterzeichen (#)
j = Jahresangabe 4stellig; m = Monatsangabe; t = Tagesangabe
std = Stundenangabe; min = Minutenangabe; meinText = Dein Ausgabetext
j = Jahresangabe 4stellig; m = Monatsangabe; t = Tagesangabe
std = Stundenangabe; min = Minutenangabe; meinText = Dein Ausgabetext
Feedbacks zu ""
Es gibt noch keine Rezension.
Vielen Dank für Dein Feedback.