Count Down

Skript zum Runterzählen von Jahren, Tagen, Stunden, Minuten, Sekunden

Verbleibende Zeit bis zum Jahr 2025

00

Jahre

00

Tage

00

Stunden

00

Minuten

00

Sekunden


Dieses Skript ist von guwii.com.

Ich habe es hier, mit der Hilfe von Werner-Zenk.de,  leicht angepasst. Guckt Euch auch den Countdown-Generator von Werner an.

Hier findet Ihr das gleiche Skript als CountUp bis zu einem Ereignis.

Einbau in Mobirise:

Das JavaScript zur Berechnung in die
> Seiteneinstellungen > "Inside <head> code":


<!-- Skript CountDown -->
<script>
    window.onload=function() {
       // Month, Day, Year, Hour:Minute:Second
       downTime('jan, 01, 2025, 00:00:00'); // ****** Datum anpassen!
    };
    function downTime(countTo) {
       nowd = new Date();
       countTo = new Date(countTo);
       difference = (countTo-nowd);
       daysd=Math.floor(difference/(60*60*1000*24)*1);
       yearsd = Math.floor(daysd / 365);
       if (yearsd >= 1){ daysd = daysd - (yearsd * 365)}
       hoursd=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
       minsd=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
       secsd=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
       if (secsd < 0) {
        yearsd = daysd = hoursd = minsd = 0;
        secsd = -1;
        window.clearTimeout(downTime);
        // Hier Aktion auf ein <p> Tag mit der id="countdownend" zur Anzeige von Text
        document.getElementById("countdownend").innerHTML = "Die Zeit ist abgelaufen";
        // hier eventuell andere Aktion ausführen ...
       }
       document.getElementById('yearsD').firstChild.nodeValue = yearsd;
       document.getElementById('daysD').firstChild.nodeValue = daysd;
       document.getElementById('hoursD').firstChild.nodeValue = hoursd;
       document.getElementById('minutesD').firstChild.nodeValue = minsd;
       document.getElementById('secondsD').firstChild.nodeValue = secsd;
       if (secsd >= 0) {
        clearTimeout(downTime.to);
        downTime.to=setTimeout(function(){ downTime(countTo); },1000);
       }
       else {
        document.getElementById('secondsD').firstChild.nodeValue = 0;
       }
    }
</script>


Die Ausgabe in den "Code Editor" anstelle eines Beispieltextes kopieren. Unten die Anzeige nach Ablauf der Zeit mit der id="countdownend":

<div id="countdown">
  <p id="yearsD">00</p>
  <p>Jahre</p>
  <p id="daysD">00</p>
  <p>Tage</p>
  <p id="hoursD">00</p>
  <p>Stunden</p>
  <p id="minutesD">00</p>
  <p>Minuten</p>
  <p id="secondsD">00</p>
  <p>Sekunden</p>
</div>
<p id="countdownend" style="font-size: 20px; color: #ffffff;"></p> 


Die CSS anpassen und in den "Code Editor" in den Bereich "CSS Editor" kopieren:

#countdown {
  text-align: center;
}
#countdown p {
  display: inline-block;
  padding: 10px;
  background-color: #a61a3d;
  margin: 0 0 20px;
  border-radius: 3px;
  color: white;
  min-width: 2.6rem;
}


  • Siehe auch den fertigen Countdown-Block vom Mobirise-Thema "PersonaM4".
  • Adresse

    Schöne Strasse 1, Berlin

    Deutschland