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, 2026, 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: 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".
