JavaScript - CountUp

Skript zum hochzählen von Jahren, Tagen, Stunden, Minuten und Sekunden. Dieser „Countup” ist am: 10 Juli 2022 um 15:00 Uhr gestartet.

00

Jahre

00

Tage

00

Stunden

00

Minuten

00

Sekunden

Das Original-Script ist von: guwii.com, ich habe es hier leicht verändert. Siehe auch: CountDown - Skript zum herunterzählen von Jahren, Tagen, Stunden, Minuten und Sekunden.


<style>

/* CountUp */
#countup {
  
text-aligncenter;
}
#countup p {
  
displayinline-block;
  
padding10px;
  
background-color#04367c;
  
margin0 0 20px;
  
border-radius3px;
  
colorwhite;
  
min-width2.6rem;
}
</
style>

<
script>
// CountUp
 
window.onload=function() {
   
// Month,Day,Year,Hour,Minute,Second
   
upTime('jan, 01, 2016, 00:00:00'); // *** Datum und Uhrzeit anpassen! ***
 
};
 function 
upTime(countTo) {
   
now = new Date();
   
countTo = new Date(countTo);
   
difference = (now-countTo);
   
days=Math.floor(difference/(60*60*1000*24)*1);
   
years Math.floor(days 365);
   if (
years >= 1){ days days - (years 365)}
   
hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
   
mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
   
secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
   
document.getElementById('years').firstChild.nodeValue years;
   
document.getElementById('days').firstChild.nodeValue days;
   
document.getElementById('hours').firstChild.nodeValue hours;
   
document.getElementById('minutes').firstChild.nodeValue mins;
   
document.getElementById('seconds').firstChild.nodeValue secs;
   
clearTimeout(upTime.to);
   
upTime.to=setTimeout(function(){ upTime(countTo); },1000);
 }
</
script>

<
div id="countup">
  <
p id="years">00</p>
  <
p>Jahre</p>
  <
p id="days">00</p>
  <
p>Tage</p>
  <
p id="hours">00</p>
  <
p>Stunden</p>
  <
p id="minutes">00</p>
  <
p>Minuten</p>
  <
p id="seconds">00</p>
  <
p>Sekunden</p>
</
div>

Tipp

Countup-Generator
Der Countup-Generator erstellt einen JavaScript-Code, der zum ausgewählten Datum die abgelaufenen Tage, Stunden, Minuten und Sekunden anzeigt.

Bausteine  Alle Anzeigen

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

<ruby> Ruby Anmerkung

CSS - Fehleingaben in Formularen farbig hervorheben

PHP - Anzahl der Einträge von einer DB-Tabelle formatiert ausgeben

JavaScript - Nachfragen bevor die Seite verlassen wird

MySQL - Datensatz eintragen

Standardschriftarten benutzen
Setze nach Möglichkeit nur Standardschriftarten ein (Arial,Times New Roman, Verdana, Fixedsys, Courier, ...), denn bei einem Besucher, der deine Schriftart nicht installiert hat, wird automatisch eine Standardschriftart gewählt und so ändert sich eventuell das komplette Layout deiner Homepage.