HKH

html knowhow

Überlagerungen Box und Text









Überlagerungen Box und Text

Mit diesem Modul können Sie Count down bis zu einem vorher eingegebenen Datum ausgeben lassen.
So sieht´s aus

Top Left
This is subtext.


Top center
This is subtext.


top right
This is subtext.


middle left
This is subtext.


middle center
This is subtext.


middle right
This is subtext.


bottom left
This is subtext.


bottom center
This is subtext.


bottom right
This is subtext


 
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