JSFiddle - React, Tailwind, and code Playground
HTML
<pre>
Kerekített: <span id="roundedValue">n/a</span>
Tényleges: <span id="actualValue">n/a</span>
</pre>
JavaScript
(function myIntervalIncrement() {
var myValue = 100, // TODO: alapérték, PHP-ból
myIncrement = 0.23, // TODO: másodpercenkénti növekmény, PHP-ból
updateFrequency = 1000, // frissítés igényelt gyakorisága, ms
lastUpdate, // legutóbbi frissítés ideje, kompenzálandó a setInterval() pontatlanságát, nagyobb pontosságért jöhet PHP-ból; epoch óta eltelt ms, UTC
myInterval; // intervalID, ha szeretnénk valamikor leállítani a számolást
/**
* Eltelt idő alapján frissíti myValue értékét
*/
function incrementValue() {
// modern böngészőkben használható a Date.now()
var now = (new Date()).getTime(),
elapsedTime = now - lastUpdate;
lastUpdate = now; // kiszámoltuk az eltelt időt, eltárolhatjuk a jelenlegi időt, mint legutóbbi frissítés
myValue += myIncrement * (elapsedTime / 1000);
}
/**
* myValue igény szerinti megjelenítése
*/
function displayCurrentValue() {
var displayValue = Math.round(myValue);
// TODO: érték igény szerinti kijelzése;
// példa: konzolba iratás
console.log(displayValue, myValue);
// példa: dokumentumban kijelzés
document.getElementById('roundedValue').textContent = displayValue;
document.getElementById('actualValue').textContent = myValue;
}
/**
* Az időközönként végrehajtandó utasítások összefoglalása
*/
function intervalCallback() {
incrementValue();
displayCurrentValue();
}
lastUpdate = (new Date()).getTime(); // ha nem PHP-ból jön a legutóbbi frissítés ideje, akkor tároljuk el most; modern böngészőkben Date.now()
myInterval = setInterval(intervalCallback, updateFrequency);
})();