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-aligncenter;
}
#countdown p {
  
displayinline-block;
  
padding10px;
  
background-color#008000;
  
margin0 0 20px;
  
border-radius3px;
  
colorwhite;
  
min-width2.6rem;
}
</
style>

<
script>
// CountDown
 
window.onload=function() {
   
// Month,Day,Year,Hour,Minute,Second
   
downTime('dec, 09, 2024, 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  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<title> Seitentitel

CSS - Farbige Scrollleiste

PHP - Dateien im Verzeichnis rekursiv auflisten, mit Filter

JavaScript - Cookies aktiv

MySQL - Alle Einträge nach einem Tag löschen

100% Text
Eine Seite sollte nicht nur mit 100% Text gefüllt sein. Lockern Sie die Seite auf zum Beispiel mit verschieden großen Absätzen, farbigen Überschriften, Bildern und Hyperlinks. Vom großen Vorteil ist, wenn der Text nicht über die ganze Browserseite geht. Mit Tabellen können Sie die Textbreite leicht begrenzen => bessere Lesbarkeit und Übersicht.