Dieses Skript ist von guwii.com. Ich habe es hier leicht angepasst. Guckt Euch auch den Countup-Generator von Werner-Zenk.de an.
Hier findet Ihr das gleiche Skript als Count Down bis zu einem Ereignis.
Einbau in Mobirise:Das JavaScript zur Berechnung in die
> Seiteneinstellungen > "Inside <head> code":<script>
window.onload=function() {
// Month,Day,Year,Hour,Minute,Second
upTime('jan,01,2017,00:00:00'); // ****** Datum anpassen!
};
function upTime(countTo) {
now = new Date();
countTo = new Date(countTo);
difference = (now-countTo);
days=Math.floor(difference/(60*60*1000*24)*1);
years = Math.floor(days / 365);
if (years >= 1){ days = days - (years * 365)}
hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
document.getElementById('years').firstChild.nodeValue = years;
document.getElementById('days').firstChild.nodeValue = days;
document.getElementById('hours').firstChild.nodeValue = hours;
document.getElementById('minutes').firstChild.nodeValue = mins;
document.getElementById('seconds').firstChild.nodeValue = secs;
clearTimeout(upTime.to);
upTime.to=setTimeout(function(){ upTime(countTo); },1000);
}
</script>
Die Ausgabe in den "Code Editor" anstelle eines Beispieltextes kopieren:<div id="countup">
<p id="years">00</p>
<p class="timeRefYears">Jahre</p>
<p id="days">00</p>
<p class="timeRefDays">Tage</p>
<p id="hours">00</p>
<p class="timeRefHours">Stunden</p>
<p id="minutes">00</p>
<p class="timeRefMinutes">Minuten</p>
<p id="seconds">00</p>
<p class="timeRefSeconds">Sekunden</p>
Die CSS anpassen und in den "Code Editor" in den Bereich "CSS Editor" kopieren: text-align: center;
}
#countup p {
display: inline-block;
padding: 10px;
background-color: #04367c;
margin: 0 0 20px;
border-radius: 3px;
color: white;
min-width: 2.6rem;
}
