JavaScript progress bar

问题:

I want to have a progress bar which should show when I click on a button, e.g. "validate now". My requirement is to check 2000 URLs whether they are working or not. This was taking a lot of time while executing in program. So I need to show a progress bar to the user to know the status. How can I do this using JavaScript?

回答1:

you could use the jQuery UI Progress bar simple, good looking and easy to implement, you just need to update the value every second or two.

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

回答2:

You would have to use Ajax and hit the server/ database every 2-3 second and fetch the status and display on web page. To display progress bar you can use table with different tds and set the background color of these td cells with the status result.

For progress bar create a table with 10 cells of equal width and say the status is 40% then you will set background of first 4 cells indicating 40%.

回答3:

Pure JavaScript is not possible, you need to use Ajax to get the current status which requires Server-Side Scripting (I guess PHP in your case).

Store the total and completed URLs (or their counts) in the database or in a session and use get the percentage of completed URLs from there in PHP, called by a JavaScript Ajax request. Then give the percentage to the jQuery bar as Prutswonder suggested in another answer.

I suggest using JSON or simply Plaintext to receive the Data in JavaScript, XML would be unneccessary overhead (so it's actually AJAJ or AJAP, not Ajax).

回答4:

I found a pop up Javascript bar. Might need some modifications to fit what you have in mind, but looks promising.

code is

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

<SCRIPT LANGUAGE="JavaScript">

//Progress Bar script- by Todd King ([e-mail])
//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>

found here code

回答5:

You could use ProgressBar.js. No dependencies, easy API and supports major browsers.

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

See more examples of usage in the demo page.

回答6:

You can make the progress bar by increasing the div width at some interval of time.

For example, you may increase the 1px width of div at each 50 milliseconds like,

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

You can get the complete code and steps over Progress Bar by JavaScript