html knowhow

Button Tag und Nacht

Mit diesem Modul können Sie Count down bis zu einem vorher eingegebenen Datum ausgeben lassen.

So sieht´s aus

Nachmodus / Tagmodus

Htmlknowhow möchte Ihnen keine Lehrstunde in html, css oder Java geben, sondern ganz praktische Tipps, wie Sie ihre Homepage optisch und inhaltlich verbessern können. Html, CSS und Java bieten da super Möglichkeiten der Webseiten-Gestaltung. Bevor Sie aber mit Ihrem Homepage-Projekt beginnen, sollten Sie sich über Grundsätzliches informieren, damit Sie wissen, was alles auf Sie zukommt. Ich gebe Homepage-Designern Tipps, wie sie ihren Webauftritt verbessern können.

Quellcode

<html>
<head>
<script>
// CountDown
window.onload=function() {
// Month,Day,Year,Hour,Minute,Second
downTime('dec, 31, 2030, 12: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>

<style>
#countdown {text-align: center;}
#countdown p {display: inline-block; padding: 1px; background-color: transparent; margin: 0 0 1px; color: black; min-width: 1rem;}
</style>
</head>

<body>
bis zum 31.12.2030, 12 Uhr sind es noch:<br/>
<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>
</body>

</html>

Kontakt Datenschutz Impressum