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.

<tbody> Tabellenkörper

CSS - Uhrzeitanzeige mal anders!

PHP - Ganzzahl (Integer) überprüfen

JavaScript - Bildschirm und Fenstergröße ermitteln

MySQL - Das Datum und die Uhrzeit der letzten 30 Minuten anzeigen

Schlechte Navigation
Eine gute Navigation ist sehr wichtig. Die Links sollten verständlich und übersichtlich angeordnet sein. Verwendet man Bilder als Navigationslinks, sollte man auf keinen Fall den alternativen Text vergessen, der angezeigt wird, wenn die Grafiken noch nicht geladen sind, oder der Besucher Grafiken deaktiviert hat. Der beste Inhalt nützt nichts, wenn sich die Besucher nicht zurechtfinden.
Verwenden Sie deutliche Kennzeichen, damit man die Seiten voneinander unterscheiden kann. Benutzen Sie einfache und leicht merkende Namen, zur Verbesserung der Navigation.
Der Besucher sollte nicht nach 15minütigem stöbern auf der Homepage das Gefühl haben, sich im Kreis zu bewegen.