진행 막대를 정확히 20 초 동안 지속 시키려면 어떻게해야합니까?

Question

진행 막대를 정확히 20 초 동안 지속해야합니다. 바가 완료되면 지금처럼 새로 고침이 가능해야합니다. 코드에 정확한 초 수를 넣을 수 있어야합니다. 당신은 jQuery를 사용하고

<div id="pbar_outerdiv"> 
<div id="pbar_innerdiv"></div> 
<!--<div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: black; font-weight: bold; text-align: center;"></div>--> 
</div> 

<script> 
var timer = 0, 
    perc = 0, 
    timeTotal = 2500, 
    timeCount = 1, 
    cFlag; 



function updateProgress(percentage) { 
    var x = (percentage/timeTotal)*100, 
     y = x.toFixed(3); 

      if(y === "100.000") 
    window.location.reload(1); 
    $('#pbar_innerdiv').css("width", x + "%"); 
    //$('#pbar_innertext').text(y + "%"); 
} 

function animateUpdate() { 
    if(perc < timeTotal) { 
     perc++; 
     updateProgress(perc); 
     timer = setTimeout(animateUpdate, timeCount); 
    } 
} 
$(document).ready(function() { 
    $('#pbar_outerdiv').click(function() { 
     if (cFlag == undefined) { 
      clearTimeout(timer); 
      perc = 0; 
      cFlag = true; 
      animateUpdate(); 
     } 
     else if (!cFlag) { 
      cFlag = true; 
      animateUpdate(); 
     } 
     else { 
      clearTimeout(timer); 
      cFlag = false; 
     } 
    }); 
    $("#pbar_outerdiv").trigger("click"); 
     }); 
</script> 

Answer 1

: 여기 내 코드입니다.

var duration = 20 * 1000; // = 20 seconds 

$(document).ready(function() { 
    $outer = $("#pbar_outerdiv"); 

    $outer.click(function() { 
     $('#pbar_innerdiv') 
      .stop() 
      .css({ width: 0 }) 
      .animate({ width: "100%" }, duration, "linear", function() { window.location.reload(1); }); 
    }) 

    $outer.trigger("click"); 
}); 

Working demo