JavaScript Countdown

HMTL und CSS Ein Kommentar

Es gibt verschiedene Anlässe und Anwendungsfälle einen Countdown auf seiner Webseite einzubinden:

  • ganz typischer Answendungsfall ist der Countdown zu Silvester
  • das Ende eines Sonderangebot oder einer Rabattaktion im Online-Handel
  • die verbleibende Zeit für ein Event, wie ein Marathonlauf oder ein Konzert
  • der 100ste Geburtstag von Opa Wilhelm.

Countdown für die Webseite

In den meisten Fällen, ist es so, dass nach Ablauf des Countdown ein bestimmtes Ereignis beginnt und für eine konkrete Zeit andauert. Deswegen sind in dem hier dargestellten JavaScript Countdown zwei verschiedene Textausgaben eingerichtet, die nach Ablauf der jeweiligen Zeit ausgegeben werden. So könnten die beiden Textausgaben für Silvester zum Beispiel wie folgt lauten:

  • “Neujahr: Feuerwerk!!!” (zu punkt 0:00Uhr)
  • “Frohes Neues Jahr!” (nach weiteren 4 Std.)

(Im nachfolgenden Beispiel wird bereits eine Minute nach Ablauf des Countdowns umgeschaltet auf “Frohes Neues Jahr!”.)

Beipiel Countdown Silvester.
Seite aktualisieren, um Countdown neu zu starten.

Oder bei einem Laufwettbewerb, wie einem Marathonlauf:

  • “Startschuss!!! Wir laufen!” (nach Ablauf des JavaScript Countdown)
  • “Lauf beendet” (nach weiteren 8 Std.)

(Im nachfolgenden Beispiel wird bereits eine Minute nach Ablauf des Countdowns umgeschaltet auf “Lauf beendet!”.)

Beipiel Countdown Laufwettbewerb.
Seite aktualisieren, um Countdown neu zu starten.
Bestseller Nr. 1
JavaScript: Programmieren für Einsteiger: Der...
JavaScript: Programmieren für Einsteiger: Der...
  • Marke:
  • JavaScript: Programmieren für Einsteiger: Der leichte Weg zum JavaScript-Experten (Einfach...
  • Farbe: White
14,99 EUR Amazon Prime
Bei Amazon kaufen

HTML-Code für JavaScript Countdown

Der hier dargestellte JavaScript-Countdown ist so aufgebaut, dass er in einer separate HTML-Datei angelegt wird. Diese HMTL-Datei kann dann als iFrame in der jeweiligen Seite eingebunden werden. Der nachfolgende HTML-Code wird innerhalb des <body>-Tags eingefügt und enthält die div-Elemente zur Darstellung des Countdowns. Damit jedes Element durch das JavaScript ansprechbar ist, bekommen diese alle eine ID. So lassen sich nicht nur die Zählwerte dynamisch anpassen, sondern auch die Texte für die Einheiten, wie Tage, Std., Min. und Sek.

<div class="wrapper_countdown">
  <div class="row_countdown">
    <div class="column_countdown">
      <div class="value_countdown" id="ctn_days"></div>
      <div class="unit_countdown" id="unit_days"></div>
    </div>
      <div class="column_countdown">
      <div class="value_countdown" id="mark_countdown1"></div>    
    </div>
    <div class="column_countdown">    
      <div class="value_countdown" id="ctn_hours"></div>
      <div class="unit_countdown" id="unit_hours"></div>
    </div>
      <div class="column_countdown">
      <div class="value_countdown" id="mark_countdown2"></div>
    </div>
    <div class="column_countdown">    
      <div class="value_countdown" id="ctn_minutes"></div>
      <div class="unit_countdown" id="unit_minutes"></div>
    </div>
      <div class="column_countdown">
      <div class="value_countdown" id="mark_countdown3"></div>
    </div>  
    <div class="column_countdown">    
      <div style="color: #e84747" class="value_countdown" id="ctn_seconds"></div>
      <div class="unit_countdown" id="unit_seconds"></div>
    </div>
  </div>
</div>

JavaScript-Code für Countdown

Das eigentliche JavaScript für den Countdown fügt man vorzugsweise in den <head>-Bereich der HTML-Datei ein. In der Variablen countDownDate trägt man ein Datum aus der Zukunft ein, zu welchem heruntergezählt werden soll. Die Variable limit enthält einen Grenzwert in Millisekunden, der ausgelöst wird nach einer bestimmten Zeit nachdem der Countdown abgelaufen ist. So lassen sich zwei verschiedene Texte nach Ablauf des Countdowns ausgeben, wie oben beschrieben.

<script>
    // hier das Countdown-Datum festlegen, zu welchem runtergezählt werden soll
    var countDownDate = new Date("Jun 21, 2020 10:00:00").getTime();

    // den Countdown jede Sekunde aktualisieren
    var x = setInterval(function() {

      // Aktuelle Zeit ermitteln
      var now = new Date().getTime();

      // Differenz ermitteln zwischen Jetz und dem Countdown-Datum; Ergebnis ist in Millisekunden
      var distance = countDownDate - now;

      // Zeitberechnung für Tage, Stunden, Minuten und Sekunden
      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);
      var limit = -4*60*60*1000 //ein Grenzwert von 4 Stunden

      // Innerhalb einer bestimmten Zeit (4 Stunden) nach Ablauf des Countdown einen bestimmten Text ausgeben
      if (distance <= 0 &&  distance > limit) {
        document.getElementById("ctn_days").innerHTML = "<div style=\"color: #e84747;\">Start: Wir laufen!</div>";
        document.getElementById("ctn_hours").style.display = 'none';
        document.getElementById("ctn_minutes").style.display = 'none';
        document.getElementById("ctn_seconds").style.display = 'none';
        document.getElementById("mark_countdown1").style.display = 'none';
        document.getElementById("mark_countdown2").style.display = 'none';
        document.getElementById("mark_countdown3").style.display = 'none';
        document.getElementById("unit_days").style.display = 'none';
        document.getElementById("unit_hours").style.display = 'none';
        document.getElementById("unit_minutes").style.display = 'none';
        document.getElementById("unit_seconds").style.display = 'none';
      }
      // Nach einer bestimmten Zeit nach Ablauf des Countdown (4 Stunden) einen bestimmten Text ausgeben
      else if (distance <= 0 && distance <= limit) {
        document.getElementById("ctn_days").innerHTML = "<div style=\"color: #e84747;\">Lauf beendet!</div>";
        document.getElementById("ctn_hours").style.display = 'none';
        document.getElementById("ctn_minutes").style.display = 'none';
        document.getElementById("ctn_seconds").style.display = 'none';
        document.getElementById("mark_countdown1").style.display = 'none';
        document.getElementById("mark_countdown2").style.display = 'none';
        document.getElementById("mark_countdown3").style.display = 'none';
        document.getElementById("unit_days").style.display = 'none';
        document.getElementById("unit_hours").style.display = 'none';
        document.getElementById("unit_minutes").style.display = 'none';
        document.getElementById("unit_seconds").style.display = 'none';
      }
      else{
        //Blöcke einblenden
        document.getElementById("ctn_hours").style.display = 'block';
        document.getElementById("ctn_minutes").style.display = 'block';
        document.getElementById("ctn_seconds").style.display = 'block';
        document.getElementById("mark_countdown1").style.display = 'block';
        document.getElementById("mark_countdown2").style.display = 'block';
        document.getElementById("mark_countdown3").style.display = 'block';
        document.getElementById("unit_days").style.display = 'block';
        document.getElementById("unit_hours").style.display = 'block';
        document.getElementById("unit_minutes").style.display = 'block';
        document.getElementById("unit_seconds").style.display = 'block';
        //Werte des Countdown anzeigen
        document.getElementById("ctn_days").innerHTML = days;
        if (hours < 10 && hours > -10) {
          //bei einstelligen Zahlen eine null davor setzen
          document.getElementById("ctn_hours").innerHTML = "0" + hours;
        } else{
          document.getElementById("ctn_hours").innerHTML = hours;
        }

        if (minutes < 10 && minutes > -10) {
          //bei einstelligen Zahlen eine null davor setzen
          document.getElementById("ctn_minutes").innerHTML = "0" + minutes;
        } else{
          document.getElementById("ctn_minutes").innerHTML = minutes;
        }

        if (seconds < 10 && seconds > -10) {
          //bei einstelligen Zahlen eine null davor setzen
          document.getElementById("ctn_seconds").innerHTML = "0" + seconds;
        } else{
          document.getElementById("ctn_seconds").innerHTML = seconds;
        }
        document.getElementById("mark_countdown1").innerHTML = ':';
        document.getElementById("mark_countdown2").innerHTML = ':';
        document.getElementById("mark_countdown3").innerHTML = ':';
        document.getElementById("unit_days").innerHTML = 'Tage';
        document.getElementById("unit_hours").innerHTML = 'Std.';
        document.getElementById("unit_minutes").innerHTML = 'Min.';
        document.getElementById("unit_seconds").innerHTML = 'Sek.';

      }
    }, 1000);
</script>

CSS-Code für Countdown

Für die Darstellung und Anpassung des Designs der einzelnen <div>-Elemente kann der folgende CSS-Code verwendet werden. Insbesondere sollte man hier auf die Verwendung des Attributs “justify-content: center;” achten, wenn man den Countdown zentrieren möchte, da das Zentrieren des div-Elements nicht funktioniert mit dem Attribut “text-align” wenn man Flex-Boxen für “display“ verwendet.

<style type="text/css">
  body{
    font-family: 'Francois One', Tahoma, Arial;
    color: #333;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    text-transform: uppercase;
    padding: 0.1em 0;
  }
  .wrapper_countdown{    
    max-width: 350px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
  .row_countdown:after {
    display: table;
  }
  .column_countdown {
    float: left;      
  }
  .unit_countdown{
    text-align: center;
    font-size: small;
    font-weight: bold;
  }
  .value_countdown{
    text-align: center;
    font-size: xx-large;
    font-weight: bolder;	
  }
</style>

iframe-Code für den Countdown

Der nachfolgende HTML-Code zeigt beispielhaft die Einbinung des JavaScript-Countdowns mittels eines iFrames. Das iFrame kann natürlich unterschiedlich konfiguriert werden oder man kann den Countdown auch direkt in die gewünschte Webseite einbauen.

<iframe style="width: 100%;" src="https://mydomain.de/my-folder/my-countdown.html" name="Countdown"></iframe>
Bestseller Nr. 1
Java Programmieren: für Einsteiger: Der leichte...
Java Programmieren: für Einsteiger: Der leichte...
  • Bonacina, Michael (Autor)
14,99 EUR Amazon Prime
Bei Amazon kaufen
Bestseller Nr. 2
HTML5 und CSS3 - Start ohne Vorwissen - mit...
HTML5 und CSS3 - Start ohne Vorwissen - mit...
  • Wenz, Christian (Autor)
6,95 EUR
Bei Amazon kaufen
Bestseller Nr. 3
Java for Web Development: Create Full-Stack Java...
Java for Web Development: Create Full-Stack Java...
  • AGARWAL, SARIKA (Autor)
29,95 EUR Amazon Prime
Bei Amazon kaufen
Post Views: 5.675

Ähnliche Artikel

Ein Kommentar

  1. Pingback: Warum kostet Software Geld? - eKiwi-Blog.de

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert