2

だから私はこのカウンターを持っていて、60秒ごとに75ずつ数字を増やす必要があります。以下のコードはこれで問題ありませんが、丸めが原因で、一部の数値が他の数値よりも長く留まり、一部の数値がスキップされます。

同じ最終結果を得るために、これをスムーズに/均等にカウントしたいと思います。setIntervalどういうわけかタイマー番号を計算する必要があることはわかっていますが、それを取得する方法がわかりません。

(function(){
    //Numbers
    var num = 0;
    var perMinute = 75;
    var perSecond = perMinute / 60;

    //Element selection
    var count = document.getElementById("count");

    function update(){

        //Add the per-second value to the total
        num += perSecond;

        //Display the count rounded without a decimal
        count.innerHTML = Math.round(num);
    }

    //Run the update function once every second
    setInterval(update, 1000);
})();

実例: http: //jsfiddle.net/ChrisMBarr/9atym/1/

4

2 に答える 2

2

決して信頼しTimeoutたりInterval、正確であったりしないでください。代わりに、「開始時刻」を保存して、現在の時刻と比較してください。

(function() {
    var start = new Date().getTime(),
        perMinute = 75,
        perMS = perMinute/60000,
        count = document.getElementById('count');
    function update() {
        var elapsed = new Date().getTime()-start;
        count.innerHTML = Math.round(elapsed*perMS);
    }
    setInterval(update,1000);
})();

カウンターを「スムーズ」に変更するように調整できることに注意してください1000(の値が大きいほど重要ですperMinute)。これは、解像度のオーバーシュートの範囲内で常に完全に機能します。

于 2013-02-28T01:34:04.293 に答える
1

丸めを移動すると、これが修正されたようです(編集:いいえ、修正されていません。以下に示すより良い修正のjsfiddleの例を参照してください)。

(function(){
//Numbers
var num = 0;
var perMinute = 75;
var perSecond = perMinute / 60;

//Element selection
var count = document.getElementById("count");

function update(){

    //Add the per-second value to the total
    num += Math.round(perSecond);

    //Display the count rounded without a decimal
    count.innerHTML = num;
}

//Run the update function once every second
setInterval(update, 1000/perSecond);
})();

編集:適切な修正-http://jsfiddle.net/4y2y9/1/

于 2013-02-28T01:38:07.250 に答える