JavaScript - CountUp

Skript zum hochzählen von Jahren, Tagen, Stunden, Minuten, Sekunden. Dieser „Countup” ist am: 1 Januar 2016 um 00: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, 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

Eine zufällige Auswahl von „Bausteinen” aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Modal-Fenster mit HTML5 und CSS

PHP - Gerade Zahlen ausgeben

JavaScript - Bei der Eingabe eines Datums die Punkte automatisch hinzufügen

MySQL - Datensatz Wert um 5% erhöhen