JavaScript - CountDown (2)
Skript zum herunterzählen von Jahren, Tagen, Stunden, Minuten und Sekunden. Dieser „Countdown” geht bis zum: 9 Dezember 2028 - 07:00 Uhr.
00
Jahre
00
Tage
00
Stunden
00
Minuten
00
Sekunden
Das Original-Script ist von: guwii.com, ich habe es verändert und daraus einen „CountDown” gemacht. Siehe auch: CountUp - Skript zum hochzählen von Jahren, Tagen, Stunden, Minuten und Sekunden.
♥ Danke an Tommy (mobirise-tutorials.com), er hat mich erst auf diese Idee gebracht.
<style>
/* CountDown */
#countdown {
text-align: center;
}
#countdown p {
display: inline-block;
padding: 10px;
background-color: #008000;
margin: 0 0 20px;
border-radius: 3px;
color: white;
min-width: 2.6rem;
}
</style>
<script>
// CountDown
window.onload=function() {
// Month,Day,Year,Hour,Minute,Second
downTime('dec, 09, 2018, 07:00:00'); // *** Datum und Uhrzeit 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);
// Eventuell eine 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>
<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>
Tipp
- Countdown-Generator
- Der Countdown-Generator erstellt einen JavaScript-Code, der autom. bis zum ausgewählten Datum, die verbleibende Zeit abzählt.
Bausteine
Eine zufällige Auswahl von „Bausteinen” (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.
CSS - Eingabefelder und Buttons formatieren
PHP - Datum und Uhrzeit formatiert ausgeben