Count Up

Skript zum Hochzählen von Jahren, Tagen, Stunden, Minuten, Sekunden

Vergangene Zeit seit dem 01. Januar 2017

00

Jahre

00

Tage

00

Stunden

00

Minuten

00

Sekunden


Dieses Skript ist von guwii.com. Ich habe es hier leicht angepasst. Guckt Euch auch den Countup-Generator von Werner-Zenk.de an.

Hier findet Ihr das gleiche Skript als Count Down bis zu einem Ereignis.

Einbau in Mobirise:

Das JavaScript zur Berechnung in die
> Seiteneinstellungen > "Inside <head> code":


<script>
        window.onload=function() {
          // Month,Day,Year,Hour,Minute,Second
          upTime('jan,01,2017,00:00:00'); // ****** Datum 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>

Die Ausgabe in den "Code Editor" anstelle eines Beispieltextes kopieren:

<div id="countup">
  <p id="years">00</p>
  <p class="timeRefYears">Jahre</p>
  <p id="days">00</p>
  <p class="timeRefDays">Tage</p>
  <p id="hours">00</p>
  <p class="timeRefHours">Stunden</p>
  <p id="minutes">00</p>
  <p class="timeRefMinutes">Minuten</p>
  <p id="seconds">00</p>
  <p class="timeRefSeconds">Sekunden</p>
</div>

Die CSS anpassen und in den "Code Editor" in den Bereich "CSS Editor" kopieren:

#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;
}

Unser Team

Dieses Skript ist von Werner-Zenk.de und zählt die Tage seit einem Ereignis

Amanda

Amanda Adams

Marketing


Eintritt am 01. Januar 2017

Joseph

Joseph Kellen

Real Estate


Eintritt am 01. Juni 2018

Nicola

Nicola Dimon

Consulting


Eintritt am 01. November 2018


Dieses Skript ist von Werner-Zenk.de. Ich habe es hier leicht angepasst, sodass die einzelnen Personen eine eigene ID durch ihren Namen erhalten haben. Hier also die Namen Amanda, Joseph und Nicola. So ist es dann möglich die Daten zu jeder Person an beliebiger Stelle anzuzeigen.

Einbau in Mobirise:

Das JavaScript zur Berechnung in die
> Seiteneinstellungen > "End of <body> code":


<!-- Script Namen seit Datum einzeln listen von Werner Zenk -->
<script>
    // Count-Up Anzeige für Personen, Dinge etc.
    var names = new Array();
    var dabei = new Array();
    // Monatsnamen in englisch eintragen (Monatsname Tag, Jahr Uhrzeit)!
    names[0] = "Amanda";
    dabei[0] = new Date('January 01, 2017 07:00:00');
    names[1] = "Joseph";
    dabei[1] = new Date('June 01, 2018 00:00:00');
    names[2] = "Nicola";
    dabei[2] = new Date('November 01, 2018 00:00:00');
    for (var zaehler = 0; zaehler < names.length; zaehler++) {
    var d = new Date();
    var millisekunden = Math.floor(d.getTime() - dabei[zaehler].getTime());
    var sekunden = Math.floor(millisekunden/1000);
    var minuten = Math.floor(sekunden/60);
    var stunden = Math.floor(minuten/60);
    var tage = Math.floor(stunden/24);
    document.getElementById(names[zaehler]).innerHTML = names[zaehler] + ' im Team seit: ' + tage + ' Tagen';
    }
</script>


Die Ausgabe einer jeden Namens-ID in den "Code Editor" an beliebige Stelle kopieren:

<span id="Amanda"></span>

Adresse

Schöne Strasse 1, Berlin

Germany

Counter

Counter Statistik