Countdown (Zähler) - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
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:
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!
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 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 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.
Download Button
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 &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>[Tage : Stunden : Minuten : Sekunden] bis zum Jahr 2020.</td>
</tr>
</table>
</div>
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 41 Heute
» 158 Gestern
» 199 Woche
» 3808 Monat
» 127178 Jahr
» 454934 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt