CountUp - aktuellen Betrag anzeigen

[pingzaong]

Servus!

Ich möchte auf einer Pokerseite den aktuellen Jahresendpot anzeigen können, welcher ständig wächst. Dies soll auch so ersichtlich sein. Untenstehend ein CountUp-Script. Leider fängt der Counter wieder von vorne an zu zählen (resp. vom startAmount), wenn man die Seite aktualisiert. Wie kann man das ändern?

<script type="text/javascript">
function addCommas( sValue )
{
var sRegExp = new RegExp('(-?[0-9]+)([0-9]{3})');

while(sRegExp.test(sValue)) {
sValue = sValue.replace(sRegExp, '$1\'$2');
}
return sValue;
}

var startAmount = 5000;
var endAmount = 10000;
var 
timer = setInterval(addTime,404.494382022);
function addTime(){
if (endAmount > startAmount)
{
startAmount += 0.01;
}
document.getElementById('jackpot').innerHTML='CHF ' + addCommas(startAmount.toFixed(2));
}
</script>

Die Ausgabe wäre dann:

<div id="jackpot"></div>

Besten Dank für die Hilfe! Siehe auch Beispiel auf http://www.buy-in.ch

[Kropff]

Leider fängt der Counter wieder von vorne an zu zählen (resp. vom startAmount), wenn man die Seite aktualisiert. Wie kann man das ändern?

Per Ajax? Indem man die Daten serverseitig speichert und dann jedesmal neu aufruft?

Peter

[pingzaong]

okay, das ist ein neues Gebiet für mich. Werde mich mal darüber schlau machen. Du weisst nicht garade spontan die Syntax?

[Kropff]

Das Prinzip ist eigentlich ganz einfach. Also, du ziehst dir doch irgendwo her die Daten für das Depot. Oder? Wenn du die hast, so musst du die z.B. per SQL-Abfrage an dein JavaScript übergeben. Wahrscheinlich benötigst du dafür noch nicht mal Ajax.

Liefer mal weitere Infos dazu. Ich denke, so schwer wird das nicht werden. Außerdem glaube ich, dass du hier mit statischen Werten arbeitest:

var startAmount = 5000;
var endAmount = 10000; 

Peter

[pingzaong]

Ja, bis jetzt wollte ich die Zahl wie folgt aus der Datenbank holen:

var startAmount = (<?php echo "$row[pot_min]"; ?>);
var endAmount = (<?php echo "$row[pot_max]"; ?>);

Klappt auch so weit, nur setzt es mir alles wieder zurück auf den Anfangswert, wenn ich F5 drücke. Geht da was ohne Ajax?

[AmicaNoctis]

Hallo,

wenn dieser Jackpot wirklich wächst, muss dieses Wachstum ja serverseitig irgendwie ermittelbar sein und dann auch bei jedem Aufruf der Seite (auch Reload) aktuell übermittelt werden. Es ergibt doch keinen Sinn, das clientseitig von einem festen Wert aus hochzuzählen. Jeder Client hätte dann seinen eigenen Jackpot und wenn er die Seite 3 Tage lang offen lässt, ist das Jahreslimit schon erreicht. Das klingt für mich unseriös. Dass dann beim Reload der "Schwindel" auffliegt, ist nur logisch und lässt sich clientseitig auch nicht verhindern.

Gruß,

Amica

[pingzaong]

Ja genau das ist der Punkt! Aber wie krieg ich das hin, dass es mir serverseitig immer den aktuellen Betrag anzeigt? Man sollte ja serverseitig den Mindest- und Maximumjackpot eingeben können, dann gibt es keinen "Schwindel", da der Jackpot ja vorher berechnet wurde.

[onemorenerd]

Welche Logik steckt denn hinter diesem ominösen Wort "Jahresendpot"?
Das oben gezeigte Javascript zählt ja nur von 5000 bis 10000 hoch. Demnach ist der Jahresendpot also 10000 und je weiter wir uns dem Jahresende nähern, desto mehr Kohle ist schon im Pot - bis dann Silvester die ganzen 10000 Ocken drin sind. Ist es das?
Dann brauchst du dafür überhaupt keine DB. Der aktuelle Füllstand des Jackpots ergibt sich aus der 10000 durch Anzahl der Sekunden des Jahres mal Anzahl bereits vergangener Sekunden.

$max_amount = 10000; // soviel soll am Ende drin sein
$now = time();
$day_per_year = 365 - date('L', $now);
$seconds_passed = $now - mktime(0, 0, 0, 1, 1);
$curr_amount = ($max_amount / ($days_per_year * 24 * 60 * 60)) * $seconds_passed; 

Das war jetzt ohne Berücksichtigung von Schaltsekunden oder Zeitzonen.

Das Ergebnis dieser Berechnung ist allerdings schon nicht mehr wahr, wenn es beim Client ankommt. Denn bis dahin sind schon wieder Sekunden verstrichen. Wenn du es ganz exakt anzeigen willst, übergibst du dem Javascript nur den Wert 10000 und führst die ganze Berechnung clientseitig aus.

[AmicaNoctis]

Ist es so, wie onemorenerd vorschlägt? Ist der Jackpot eine Funktion der Zeit? Oder wächst er durch konkrete Einzahlungen/Gebote/Bankgewinne mit einer geschätzten oder aus Erfahrungen der Vergangenheit ermittelten Rate? Wann wird der Wert in der DB jeweils aktualisiert, wenn überhaupt? Wie hast du diese 404ms bis zur nächsten Erhöhung ermittelt? Wenn man das damit durchrechnet, haut das ja auch nicht hin. Irgendwie ist hier noch Klärungsbedarf.

Da du von einem "aktuellen Jahresendpot" sprachst, dachte ich, dass sich das bis dahin auch noch ändern kann und das würde auch das Abrufen aus der DB erklären. Solange dieser Wert sich in der DB aber nicht ändert, wirst du mit JS immer wieder dort anfangen müssen, oder deine Besucher bekommen total unsinnige und falsche Werte (z. B. über Cookies).

Um aber auf deine Frage zurückzukommen:

Bei jedem Reload der Seite startet ein JavaScript-Programm wieder von vorn. Wenn du Daten speichern willst, kannst du Cookies benutzen. Du kannst sie aber auch gleich topaktuell durch den Server ausliefern. Da sich die DB offenbar nicht so schnell ändert, geht letzteres offenbar schon nicht. Cookies scheiden aber auch aus, weil deine Berechnung nur funktioniert, wenn du schon beim Laden der Seite weißt, wie lange der Besucher sie betrachten wird, bevor er sie wechselt oder neu lädt.

Kurz: es gibt (auf Basis der vorliegenden Informationen) keine Möglichkeit, dein Vorhaben halbwegs sinnvoll oder halbwegs zuverlässig umzusetzen.

Amica

[pingzaong]

Es geht mir im Prinzip gar nicht um die Höhe des Jackpots oder wieviel da drin ist. Im Vordergrund steht lediglich die Zahl, die bei einem Reload der Seite nicht wieder vom Start beginnt, sondern sich fortsetzt. Das bedingt ja meines Wissens ein ständiges Update des Jackpots serverseitig.

[AmicaNoctis]

Ok, dann speichere den Wert bei jedem Aufruf von addTime in window.name. Beim Laden der Seite siehst du nach, ob in window.name was drin steht und wenn ja, nimmst du das als Startwert.

[onemorenerd]

@Amica: Das führt zu nichts. Wenn der User den Browser schließt, wieder öffnet und erneut auf die Seite geht, fängt der CountUp wieder bei 5000 an.

@pingzaong: Das ständige serverseitige Update habe ich dir mit dem Schnipsel PHP vorhin schon geliefert. Wenn man das noch etwas verfeinert zu

$max_amount = 10000; // soviel soll am Ende drin sein
$now = time();
$day_per_year = 365 - date('L', $now);
$seconds_passed = $now - mktime(0, 0, 0, 1, 1);
$inc_per_second = $max_amount / ($days_per_year * 24 * 60 * 60);
$curr_amount = $inc_per_second * $seconds_passed; 

musst du nur noch $inc_per_second und $curr_amount ins Javascript ausgeben und deine addTime-Funktion ein wenig anpassen.

Um den oben angesprochenen Delay zwischen serverseitiger Berechnung von $curr_amount und dem Laden der Seite im Client zu eliminieren, kannst du $curr_amount clientseitig berechnen.

[AmicaNoctis]

@onemorenerd

$day_per_year = 365 [B][COLOR="Red"]+[/COLOR][/B] date('L', $now);