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:
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.
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!
Für die Datumsformate haben wir hier eine hilfreiche Liste für das JavaScript Date Object bereitgestellt.
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 language="javascript">
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 type='text/javascript'>
// 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 type="text/javascript">// 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 nur im Head- und Html-Code das Verzeichnis entsprechend angepasst werden.
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 nur im Head- 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.
HEAD-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 Jahr 2020. |
Code für den <HEAD> Bereich
<script language="javascript">
<!-- Begin
function getTime() {
c1 = new Image(); c1.src = "wsX5Obj/Obj100_2/digi_yellow/digi1.gif";
c2 = new Image(); c2.src = "wsX5Obj/Obj100_2/digi_yellow//digi2.gif";
c3 = new Image(); c3.src = "wsX5Obj/Obj100_2/digi_yellow//digi3.gif";
c4 = new Image(); c4.src = "wsX5Obj/Obj100_2/digi_yellow//digi4.gif";
c5 = new Image(); c5.src = "wsX5Obj/Obj100_2/digi_yellow//digi5.gif";
c6 = new Image(); c6.src = "wsX5Obj/Obj100_2/digi_yellow//digi6.gif";
c7 = new Image(); c7.src = "wsX5Obj/Obj100_2/digi_yellow//digi7.gif";
c8 = new Image(); c8.src = "wsX5Obj/Obj100_2/digi_yellow//digi8.gif";
c9 = new Image(); c9.src = "wsX5Obj/Obj100_2/digi_yellow//digi9.gif";
c0 = new Image(); c0.src = "wsX5Obj/Obj100_2/digi_yellow//digi0.gif";
Cc = new Image(); Cc.src = "wsX5Obj/Obj100_2/digi_yellow//digi_dp.gif";
now = new Date();
//Datum (engl. Format) für den Countdown hier eingeben
later = new Date("Jan 1 " + (parseInt(new Date().getFullYear())+1) + " 00:00:00");
days = (later - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (later - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (later - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (later - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);
if (secondsRound <= 9) {
document.images.g.src = c0.src;
document.images.h.src = eval("c"+secondsRound+".src");
}
else {
document.images.g.src = eval("c"+Math.floor(secondsRound/10)+".src");
document.images.h.src = eval("c"+(secondsRound%10)+".src");
}
if (minutesRound <= 9) {
document.images.d.src = c0.src;
document.images.e.src = eval("c"+minutesRound+".src");
}
else {
document.images.d.src = eval("c"+Math.floor(minutesRound/10)+".src");
document.images.e.src = eval("c"+(minutesRound%10)+".src");
}
if (hoursRound <= 9) {
document.images.y.src = c0.src;
document.images.z.src = eval("c"+hoursRound+".src");
}
else {
document.images.y.src = eval("c"+Math.floor(hoursRound/10)+".src");
document.images.z.src = eval("c"+(hoursRound%10)+".src");
}
if (daysRound <= 9) {
document.images.x.src = c0.src;
document.images.a.src = c0.src;
document.images.b.src = eval("c"+daysRound+".src");
}
if (daysRound <= 99) {
document.images.x.src = c0.src;
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
if (daysRound <= 999){
document.images.x.src = eval("c"+Math.floor(daysRound/100)+".src");
document.images.a.src = eval("c"+Math.floor((daysRound/10)%10)+".src");
document.images.b.src = eval("c"+Math.floor(daysRound%10)+".src");
}
newtime = window.setTimeout("getTime();", 1000);
}
// End -->
</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 Jahr 2020.</td>
</tr>
</table>
</div>
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.