Индикатор выполнения JavaScript

Question

Я хочу иметь индикатор выполнения, который должен отображаться при нажатии на кнопку, например msgstr "подтвердить сейчас". Мое требование - проверить 2000 URL, работают они или нет. Это занимало много времени при выполнении в программе. Поэтому мне нужно показать индикатор выполнения пользователю, чтобы узнать статус. Как я могу сделать это с помощью JavaScript?

Answer 1

вы можете использовать jQuery UI Progress Bar просто, красиво и легко реализовать, вам просто нужно обновлять значение каждую секунду или две.

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

Answer 2

Вы должны будете использовать Ajax и каждые 2-3 секунды обращаться к серверу / базе данных, получать статус и отображаться на веб-странице. Для отображения индикатора выполнения вы можете использовать таблицу с различными td s и установить цвет фона для этих td ячеек с результатом состояния.

Для индикатора выполнения создайте таблицу с 10 ячейками одинаковой ширины и скажите, что статус равен 40%, затем вы установите фон первых 4 ячеек, указывающих 40%.

Answer 3

Вы можете сделать индикатор выполнения, увеличив ширину div в некоторый интервал времени.

Например, вы можете увеличивать ширину div на 1 пиксель каждые 50 миллисекунд, например,

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

Вы можете получить полный код и пошагово выполнить Индикатор выполнения по JavaScript

Answer 4

Вы можете использовать ProgressBar.js . Никаких зависимостей, простой API и поддержка основных браузеров.

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

Смотрите другие примеры использования на демонстрационной странице.

Answer 5

Я нашел всплывающую панель 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>

найдено здесь код

Answer 6

Чистый JavaScript невозможен, вам нужно использовать Ajax , чтобы получить текущий статус, который требует сценариев на стороне сервера (я полагаю, PHP в вашем случае).

Сохраните итоговые и завершенные URL-адреса (или их количество) в базе данных или в сеансе и используйте функцию получения процентного содержания от общего числа URL-адресов оттуда в PHP, вызванную запросом JavaScript Ajax. Затем укажите процент в строке jQuery, как предложил Prutswonder в другом ответе.

Я предлагаю использовать JSON или просто незашифрованный текст для получения данных в JavaScript, XML будет ненужной накладной нагрузкой (так что на самом деле это AJAJ или AJAP, а не Ajax).