Countdown mit JavaScript

Für einen Countdown gibt es diverse Einsatzzwecke. Dabei hast du auch die Möglichkeit, einen Countdown mit JavaScript in deine Website einzubauen. Über ein entsprechendes Ziel-Datum kannst du dabei die Zeit festlegen, die der Countdown anschließend anzeigt.

In diesem Artikel zeige ich dir, wie das funktioniert.

Countdown mit JavaScript erstellen

Das hier verwendete JavaScript erzeugt einen Countdown der Jahre, Monate, Tage, Stunden und Sekunden anzeigt und runterzählt.

 

Beispiel:

<html>
  <head>
    <title>Datum-Countdown mit JavaScript</title>
     <script language="JavaScript">
      // Ziel-Datum in MEZ
      var jahr=2222, monat=2, tag=22, stunde=22, minute=22, sekunde=22;
      var zielDatum=new Date(jahr,monat-1,tag,stunde,minute,sekunde);
       function countdown() {
        startDatum=new Date(); // Aktuelles Datum
         // Countdown berechnen und anzeigen, bis Ziel-Datum erreicht ist
        if(startDatum<zielDatum)  {
           var jahre=0, monate=0, tage=0, stunden=0, minuten=0, sekunden=0;
           // Jahre
          while(startDatum<zielDatum) {
            jahre++;
            startDatum.setFullYear(startDatum.getFullYear()+1);
          }
          startDatum.setFullYear(startDatum.getFullYear()-1);
          jahre--;
           // Monate
          while(startDatum<zielDatum) {
            monate++;
            startDatum.setMonth(startDatum.getMonth()+1);
          }
          startDatum.setMonth(startDatum.getMonth()-1);
          monate--;
           // Tage
          while(startDatum.getTime()+(24*60*60*1000)<zielDatum) {
            tage++;
            startDatum.setTime(startDatum.getTime()+(24*60*60*1000));
          }
           // Stunden
          stunden=Math.floor((zielDatum-startDatum)/(60*60*1000));
          startDatum.setTime(startDatum.getTime()+stunden*60*60*1000);
           // Minuten
          minuten=Math.floor((zielDatum-startDatum)/(60*1000));
          startDatum.setTime(startDatum.getTime()+minuten*60*1000);
           // Sekunden
          sekunden=Math.floor((zielDatum-startDatum)/1000);
           // Anzeige formatieren
          (jahre!=1)?jahre=jahre+" Jahre,  ":jahre=jahre+" Jahr,  ";
          (monate!=1)?monate=monate+" Monate,  ":monate=monate+" Monat,  ";
          (tage!=1)?tage=tage+" Tage,  ":tage=tage+" Tag,  ";
          (stunden!=1)?stunden=stunden+" Stunden,  ":stunden=stunden+" Stunde,  ";
          (minuten!=1)?minuten=minuten+" Minuten  und  ":minuten=minuten+" Minute  und  ";
          if(sekunden<10) sekunden="0"+sekunden;
          (sekunden!=1)?sekunden=sekunden+" Sekunden":sekunden=sekunden+" Sekunde";
           document.countdownform.countdowninput.value=
              jahre+monate+tage+stunden+minuten+sekunden;
           setTimeout('countdown()',200);
        }
        // Anderenfalls alles auf Null setzen
        else document.countdownform.countdowninput.value=
            "0 Jahre,  0 Monate,  0 Tage,  0 Stunden,  0 Minuten  und  00 Sekunden";
      }
    </script>
  </head>
   <body onload="countdown()">
    <form name="countdownform">
      <p>
        <input size="75" name="countdowninput">
      </p>
    </form>
  </body>
 </html>

 

Script gefunden auf: Jjam.de

 

Hinweise:

Um das Ziel-Datum für das JavaScript einzustellen, musst du die Variablen unter dem Kommentar //Ziel-Datum entsprechend anpassen. Das JavaScript zählt schließlich die Jahre, Monate, Tage, Stunden, Minuten und Sekunden runter.

Der Countdown selbst wird an der Stelle deiner Website angezeigt, an der du das Formular einbaust. Das Formular aus dem Beispiel kann an einer beliebigen Stelle eingebunden werden. Das Countdown Script an sich muss aber im Kopfbereich des HTML Dokuments platziert werden.

 

Mit dem folgenden Screenshot zeige ich dir noch das Ergebnis, wie es auf deiner Website aussehen könnte. Du kannst das Bild anklicken, um es größer darzustellen.

Countdown mit JavaScript
Countdown mit JavaScript

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.