페이지로드시 시각적으로 최대 페이지 수를 계산하십시오.

Question

페이지에 번호가 매겨진 통계가 있으므로 좀 더 시각적으로 매력적으로 보이고 싶습니다. jQuery를 사용하여 그 수만큼 계산을 시뮬레이트하는 것이 좋습니다.

따라서 페이지로드시 숫자가 32라고 가정합니다. 숫자는 0부터 시작하여 최대 32 개까지 계산되며 각 숫자 사이에는 약간의 지연 간격이 있습니다.

나는이 문제를 어떻게 달성 할 것인가? 이것은 시도한 코드이지만 작동하지 않습니다. 페이지의 번호 (3 개의 statRibbon이 있음)를 캡처하지만 각 숫자 0, 1, 2, 3 등을 볼 수있는 위치는 시각적으로 세지 않습니다. 이상적으로는 각 리본 하나를 시간이 아닌 동시에 시간이 필요하지만 부피가 큰 추가 코드가 필요한 경우에는 괜찮습니다. 각자는 이것을 어떻게 든 돌봐야한다고 생각합니다.

$(function() { 
    $(".statRibbon .bigStat span").each(function() { 
     var tmp = this.innerHTML; 
     var i = 0; 
     while(i != tmp) { 
      $(".statRibbon .bigStat span").innerHTML(i++); 
      alert(i); 
     } 
    }); 
}); 

Answer 1

어떻게 당신을 위해이 일? 의 setTimeout 함수의 끝에

http://jsfiddle.net/WpJxn/1/

변경 50는 밀리 초에서 계산 속도를 변경합니다.

Answer 2

숫자를 경고하기 전이나 후에 루프에 잠자기 또는 지연이 필요합니다. setTimeout 메서드를 사용해보십시오.

현재이 질문에 자세한 정보를 찾을 수 있습니다 : Jquery: how to sleep or delay?

Answer 3

사람이 특정 후 증가 사용에 카운터를 증가하기를 원한다면 나는 setInteval

$(function() { 
    $(".statRibbon .bigStat span").each(function() { 
     var that = $(this), 
      tmp = that.html(), 
      i = 0, 
      interval; 

     that.html(0); 
     interval = setInterval(function() { 
      that.html(++i); 
      if (i === +tmp) clearInterval(interval); 
     }, 50); 
    }); 
});​ 

Answer 4

로 잠시 대체 것,

// HTML

<span class="stat-count">10000</span> 

// JS

$(function() { 
    function count($this){ 
     var current = parseInt($this.html(), 10); 
     current = current + 50; /* Where 50 is increment */ 

    $this.html(++current); 
    if(current > $this.data('count')){ 
     $this.html($this.data('count')); 
    } else {  
     setTimeout(function(){count($this)}, 5); 
    } 
}   

$(".stat-count").each(function() { 
    $(this).data('count', parseInt($(this).html(), 10)); 
    $(this).html('0'); 
    count($(this)); 
}); 

}); 

JQuery 카운트 수는 특정 제한이있는 페이지로드 시간, 계산 시간 및 증가 카운트입니다.