일정 기간 동안 숫자를 부드럽게 처리하십시오.

Question

이 카운터가 있으므로 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/

Answer 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/

Answer 2

정확 Timeout 또는 Interval에 의존하지 마십시오. 대신 "시작 시간"을 저장하고 현재 시간과 비교하십시오. 당신이 변화하는 1000을 조정할 수 있습니다

(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); 
})(); 

참고 카운터 (perMinute의 더 큰 값을 더 중요)은 "부드럽게"그것은 항상 해상도의 오버 슈트 내에서 완벽하게 작동합니다.