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.

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-align: center;

}

#countup p {

  display: inline-block;

  padding: 10px;

  background-color: #04367c;

  margin: 0 0 20px;

  border-radius: 3px;

  color: white;

  min-width: 2.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.

<span> Allgemeines Inline-Element

CSS - Datum als Kalenderblatt darstellen

PHP - Array in einer Datei speichern und wieder auslesen

JavaScript - Schlüssel und Wert aus einem Objekt auslesen

MySQL - Spalten aktualisieren