Zahl bis Datum von Datum bis Datum hochzählen lassen?

4 Antworten

Rechnest aus, wie viele Tage es vom Start bis End Datum es sind.

Danach dividierst du die 420 durch die Zahl, die du herausbekommen hast.

Das ist die Zahl, um wie viel du jeden Tag deine Zielzahl erhöhen musst, um am End Datum auf 420 zu kommen.

Beispiel:

Der Zeitraum beträgt 30 Tage. 420 durch 30 = 14

Jeden Tag rechnest du auf Zahl x 14 auf, so hast du nach 30 Tagen 420.

Oder, du rechnest x * 14 = y ... Wobei x die Anzahl der vergangene Tagen ist und y die Zahl ist, die du berechnet hast.

  1. Wir prüfen die Richtigkeit der Daten.
  2. Wir prüfen, ob das Datum gekommen ist, um den Zähler zu starten.
  3. Wenn die Zählung bereits begonnen hat, bestimmen wir, welcher Wert des Zählers angezeigt werden soll und wann die nächste Aktualisierung des Zählers erfolgen soll.
  4. Verwenden Sie die setTimeout-Methode, um den nächsten Aktualisierungszähler zuzuweisen.
  5. Verwenden Sie die setInterval-Methode, um den Zähler danach regelmäßig zu aktualisieren.
  6. Verwenden Sie die clearInterval-Methode, um die Intervalle zu stoppen.

Erklärungen zu diesen Methoden finden Sie zum Beispiel hier: JavaScript Timing Events

Hier ist ein Entwurf der Lösung. Sie müssen testen, ob ich alles berücksichtigt habe.
Demo: https://codepen.io/glebkema/pen/jRKWGP?editors=1010

HTML:

<div id="counter">-</div>

JavaScript:

var $counter = document.getElementById('counter'),
	start = Date.parse('10 Apr 2019 12:00:00 GMT-0200'),
	end = Date.parse('23 Apr 2019 16:00:00 GMT-0200'),
	numberOfTicks = 420;

if (start && end && start < end) {
	var interval = (end - start) / numberOfTicks,
		now = new Date().getTime(),
		counter,
		nextTick;
	if (now < start) {
		counter = 0;
		nextTick = start;
	} else {
		counter = Math.floor((now - start) / interval);
		nextTick = end - (numberOfTicks - counter - 1) * interval;
	} 
	$counter.innerHTML = counter;
	setTimeOut(function() {
		if (counter < numberOfTicks) {
			$counter.innerHTML = ++counter;
			var timerId = setInterval(function() {
				if (counter < numberOfTicks) {
					$counter.innerHTML = ++counter;
				} else {
					clearInterval(timerId);
				}
			}, interval);
		}
	}, nextTick - now);
} else {
	console.error('Data is incorrect');
}

Wirklich perfekt, passt fast alles :D
Allerdings aktualisiert sich die Zahl erst nach einem Seitenrefresh. Wenn man das jetzt noch so einstellen könnte, dass die Zahl läuft, wenn man auf der Seite ist, hätte ich mein Ziel erreicht... :D

0
@Doyli

Ich habe einen Tippfehler im Namen der Methode gemacht, aufgrund dessen ein Fehler im Skript aufgetreten ist. Es sollte "setTimeout" anstelle von "setTimeOut" sein.

Ich habe CodePen korrigiert und der Zähler aktualisiert sich, soweit ich sehen kann, ohne die Seite neu zu laden. Sie können den numberOfTicks-Wert auf 42000 setzen, damit Updates schneller durchgeführt werden.

0
@glebkema
Es funktioniert! :D
Habe jetzt noch GMT-0200 auf UTC+2 umgestellt, jetzt wird alles richtig angezeigt!
Vielen, vielen Dank! :D
0
@Doyli

musst aber aufpassen , das funktioniert nicht in anderen ländern oder wenn der browser eine andere zone hat . deswegen hab ich meins nochmal angepasst so das es ohne GTM einstellungen funktioniert. bzw lass einfach die GMT weg dann ist es überall gültig.

0
@RakonDark

ups ne , da lieg ich glaub ich falsch , ich sag ja ist heute nicht mein tag lol

0
<div id="counter">
</div>
<script>
start = new Date(2019,4,10,12).getTime();
ende = new Date(2019,4,23,16).getTime();
ziel = 420;
function show() {
 jetzt = new Date().getTime();
 steps = Math.floor((ende-start ) / ziel);
 counter = ziel - (Math.floor((((ende - jetzt) / steps))/1000))+1;
 if (counter > ziel) { counter = ziel;}
 document.getElementById("counter").innerHTML = counter;
}
setInterval(show(),1000);
</script>
korrektur :  steps = Math.floor((ende-start ) / ziel);


 ändern in 

 steps = (ende-start ) / ziel;

und irgendwie das +1 noch weg ...
0

ups da hab ich das alte kopiert .

hier das richtige :

<div id="counter">
</div>
<script>
start = new Date(2019,4,10,12).getTime();
ende = new Date(2019,4,23,16).getTime();
ziel = 420;
function show() {
 jetzt = new Date().getTime();
 steps = (ende-start ) / ziel;
 if (ende > jetzt){
   counter = Math.floor(ziel - ((ende - jetzt) / steps));
 } else {
   counter = ziel;
 }
 document.getElementById("counter").innerHTML = counter;
}
setInterval(show(),1000);
</script>
0

Was möchtest Du wissen?