JavaScript - CountDown (2)

Skript zum herunterzählen von Jahren, Tagen, Stunden, Minuten, 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, 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, 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” aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Link farbig unterstreichen

PHP - Webseite mit einem Button neu laden

JavaScript - JavaScript-Version des Browsers anzeigen

MySQL - Datensatz Wert erhöhen