자바 스크립트 진행률 표시 줄

Question

버튼을 클릭 할 때 표시되는 진행률 표시 줄이 필요합니다. "지금 확인"하십시오. 내 요구 사항은 2000 URL이 작동하는지 여부를 확인하는 것입니다. 이것은 프로그램에서 실행하는 동안 많은 시간이 걸렸습니다. 그래서 나는 상태를 알기 위해 진행 바를 보여줄 필요가있다. JavaScript로 어떻게 할 수 있습니까?

Answer 1

Ajax를 사용하고 2-3 초마다 서버/데이터베이스를 중단하고 상태를 가져 와서 웹 페이지에 표시해야합니다. 진행률 표시 줄을 표시하려면 td이 서로 다른 표를 사용하고이 td 셀의 배경색을 상태 결과와 함께 설정하십시오.

진행률 표시 줄에 10 개의 동일한 폭의 셀이있는 표를 만들고 상태가 40 %라고하면 처음 4 개의 셀 배경을 40 %로 설정합니다.

Answer 2

간단하고보기가 쉬우 며 구현하기가 쉽습니다. 매초 또는 2 초마다 값을 업데이트하면됩니다.

$("#progressbar").progressbar({ 
     value: 37 
    }); 

Answer 3

순수 자바 스크립트 수 없습니다, 당신은 서버 측 스크립트 (나는 귀하의 경우 PHP를 추측)을 필요로 현재 상태를 얻을 수 Ajax를 사용해야합니다.

전체 또는 완료된 URL (또는 개수)를 데이터베이스 또는 세션에 저장하고 JavaScript Ajax 요청에 의해 호출 된 완성 된 URL의 백분율을 PHP에서 가져옵니다. 그런 다음 Prutswonder가 다른 대답으로 제안한대로 jQuery 막대에 백분율을 지정하십시오.

JSON 또는 단순히 일반 텍스트를 사용하여 JavaScript로 데이터를받는 것이 좋습니다. XML은 불필요한 오버 헤드가됩니다 (실제로 AJAJ 또는 AJAP이지 Ajax가 아닙니다).

Answer 4

Javascript 팝업 창이 나타납니다. 당신이 염두에두고있는 것을 맞추기 위해 약간의 수정이 필요 하겠지만 유망 해 보인다.

코드는

<style> 
<!-- 
.hide { position:absolute; visibility:hidden; } 
.show { position:absolute; visibility:visible; } 
--> 
</style> 

<SCRIPT LANGUAGE="JavaScript"> 

//Progress Bar script- by Todd King (tking@igpp.ucla.edu) 
//Modified by JavaScript Kit for NS6, ability to specify duration 
//Visit JavaScript Kit (http://javascriptkit.com) for script 

var duration=3 // Specify duration of progress bar in seconds 
var _progressWidth = 50; // Display width of progress bar. 

var _progressBar = "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||" 
var _progressEnd = 5; 
var _progressAt = 0; 


// Create and display the progress dialog. 
// end: The number of steps to completion 
function ProgressCreate(end) { 
    // Initialize state variables 
    _progressEnd = end; 
    _progressAt = 0; 

    // Move layer to center of window to show 
    if (document.all) { // Internet Explorer 
     progress.className = 'show'; 
     progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2); 
     progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2); 
    } else if (document.layers) { // Netscape 
     document.progress.visibility = true; 
     document.progress.left = (window.innerWidth/2) - 100+"px"; 
     document.progress.top = pageYOffset+(window.innerHeight/2) - 40+"px"; 
    } else if (document.getElementById) { // Netscape 6+ 
     document.getElementById("progress").className = 'show'; 
     document.getElementById("progress").style.left = (window.innerWidth/2)- 100+"px"; 
     document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40+"px"; 
    } 

    ProgressUpdate(); // Initialize bar 
} 

// Hide the progress layer 
function ProgressDestroy() { 
    // Move off screen to hide 
    if (document.all) { // Internet Explorer 
     progress.className = 'hide'; 
    } else if (document.layers) { // Netscape 
     document.progress.visibility = false; 
    } else if (document.getElementById) { // Netscape 6+ 
     document.getElementById("progress").className = 'hide'; 
    } 
} 

// Increment the progress dialog one step 
function ProgressStepIt() { 
    _progressAt++; 
    if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd; 
    ProgressUpdate(); 
} 

// Update the progress dialog with the current state 
function ProgressUpdate() { 
    var n = (_progressWidth/_progressEnd) * _progressAt; 
    if (document.all) { // Internet Explorer 
     var bar = dialog.bar; 
    } else if (document.layers) { // Netscape 
     var bar = document.layers["progress"].document.forms["dialog"].bar; 
     n = n * 0.55; // characters are larger 
    } else if (document.getElementById){ 
       var bar=document.getElementById("bar") 
     } 
    var temp = _progressBar.substring(0, n); 
    bar.value = temp; 
} 

// Demonstrate a use of the progress dialog. 
function Demo() { 
    ProgressCreate(10); 
    window.setTimeout("Click()", 100); 
} 

function Click() { 
    if(_progressAt >= _progressEnd) { 
     ProgressDestroy(); 
     return; 
    } 
    ProgressStepIt(); 
    window.setTimeout("Click()", (duration-1)*1000/10); 
} 

function CallJS(jsStr) { //v2.0 
    return eval(jsStr) 
} 

</script> 

<SCRIPT LANGUAGE="JavaScript"> 

// Create layer for progress dialog 
document.write("<span id=\"progress\" class=\"hide\">"); 
    document.write("<FORM name=dialog id=dialog>"); 
    document.write("<TABLE border=2 bgcolor=\"#FFFFCC\">"); 
    document.write("<TR><TD ALIGN=\"center\">"); 
    document.write("Progress<BR>"); 
    document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\""); 
    if(document.all||document.getElementById) // Microsoft, NS6 
     document.write(" bar.style=\"color:navy;\">"); 
    else // Netscape 
     document.write(">"); 
    document.write("</TD></TR>"); 
    document.write("</TABLE>"); 
    document.write("</FORM>"); 
document.write("</span>"); 
ProgressDestroy(); // Hides 

</script> 


<form name="form1" method="post"> 
<center> 
<input type="button" name="Demo" value="Display progress" onClick="CallJS('Demo()')"> 
</center> 
</form> 

<a href="javascript:CallJS('Demo()')">Text link example</a> 

<p align="center">This free script provided by<br /> 
<a href="http://www.javascriptkit.com">JavaScript 
Kit</a></p> 

당신은 ProgressBar.js를 사용할 수 있습니다 여기 code

Answer 5

을 발견합니다. 의존성이없고 쉬운 API이며 주요 브라우저를 지원합니다.

var line = new ProgressBar.Line('#container'); 
line.animate(1); 

당신은 일정 시간 간격으로 DIV의 폭을 증가하여 진행률 표시 줄을 만들 수 있습니다 사용 in the demo page.

Answer 6

의 더 많은 예제를 참조하십시오.

예를 들어,

var width = 1 
function render(){ 
    if(width <=100){ 
     // apply width to div for progress bar 
     div.style.width = width + "px"; 
     setTimeout(
      function(){ 
       render(); 
       width++; 
      },50 
     ); 
    } 
} 
render(); 

당신은 경우 (Progress Bar by JavaScript