jQuery를이 - DIV 모두의 모든 초

Question

먼저 넓은 얻을 수 있도록, 내가 당신을 경고해야, 내 영어

확인, 여기 내 문제는 ... 너무 좋지 않다 : 나는 넓은 각을 얻을 수 진행률 표시 줄이 두 번째는 퍼센트를 기준으로합니다.

매 초마다 1.67/[max] %를 추가하고 싶습니다. [최대] = 100 % (소요 시간) ([max] = 10 경우 - 진행 표시 줄이 10 분 소요됩니다)

내 코드는 작동하지만 경우에만 (분할 후) 수보다 더 큰 0.3 (이 같은)입니다.

그래서 진행 표시 줄에 1 분 ([max] = 1)이 걸리면 코드는 나누기 후 1.67이므로 코드가 작동 함을 의미합니다. 하지만 최대 값을 15 분으로 설정하면 작동하지 않습니다. 왜요?!

이 내 코드입니다 : 제발 도와주세요

<script> 
function updateProgress() { 
    /*Get Progress Width (in percents)*/ var progress = (100 * parseFloat($('#arena_bar').css('width'))/parseFloat($('#arena_bar').parent().css('width'))); 
    var corrent = progress; 
    var max = 1; // one minute 
    var add = 1.67/max; 

    if (progress < 100) { 
     corrent += add; 
     $("#arena_bar").css("width", corrent + "%"); 
     setTimeout(updateProgress, 1000); // update every second 
    } 
} 
updateProgress(); 
</script> 

(나는 그것을 쉽게하기 위해 몇 가지 의견을 추가)!

Answer 1

문제는 너비가 CSS에서 변경되는 비율만큼 증가하지 않으므로 일정한 상태로 유지된다는 것입니다 (적어도 그 모양은 그대로입니다). 것은 모든 것을 정말로 필요로하지 않는다는 것입니다.

Here's a js fiddle 코드가 작동하도록 변경되었습니다. 빠른 실행을 위해 시간 지연을 변경 했으므로 원하는 경우 다시 1000ms로 변경할 수 있습니다.

그리고 코드 :

HTML :

<div style="width:400px; background-color:black"> 
<div id="arena_bar" style="background-color:navy; width:10px">&nbsp;</div> 
</div> 

JS : 공식적으로

/*Get Progress Width (in percents)*/ var corrent = (100 * parseFloat($('#arena_bar').css('width'))/parseFloat($('#arena_bar').parent().css('width'))); 
function updateProgress() { 
    var max = 15; // one minute 
    var add = 1.67/max; 
    if (corrent < 100) { 
     corrent += add; 
     $("#arena_bar").css("width", corrent + "%"); 
     setTimeout(updateProgress, 50); // update every second 
    } 
} 
updateProgress(); 

Answer 2

는 jQuery를 그것을 사용하여 설정하고, 실제 비율 값으로하여 계산 된 폭을 설정하지 않습니다 픽셀 값.

이 예제에서는 쓰여진 너비와 읽은 너비를 볼 수 있습니다.

http://jsfiddle.net/9PjqZ/1/

당신이 다음 함수 호출을 읽을 값에 차이가 볼 수 있듯이

function updateProgress() { 
    var progress = (parseInt($('#arena_bar').css('width'))/parseInt($('#arena_bar').parent().css('width')))*100; 
    $('.progress').text('Read: ' + progress + ' %'); 

    var max = 1; 
    var add = 1.67/max; 

    if (progress < 100) { 
     progress += add; 
     $('.debug').html('Written: ' + progress + ' %'); 
     $("#arena_bar").css("width", progress + "%"); 
     setTimeout(updateProgress, 1000); // update every second 
    } 
} 
updateProgress(); 

. 기록 된 값과 읽은 값의 차이가 알려지지 않은 한계를 초과하지 않는 경우 아무런 문제가 없습니다. 그들이 서로 너무 가까워지면 당신의 아이디어는 더 이상 작동하지 않을 것입니다.

css 외부에 현재 백분율을 저장하고 css에만 기록하고 css에서는 읽지 않아야합니다.