Comment modifier la barre de progression dans la boucle?

J'ai du code html. Et j'ai besoin d'un peu de code javascript pour la mise à jour de la valeur à chaque itération

<progress id="progressBar" max="100" value="0"></progress>


for (i = 0; i <= 100; i ++) {
    //update progress bar
}

J'essaie de faire quelque chose comme ceci:

var progressBar = document.getElementById("progressBar");
progressBar.value += i;

Mais ce n'est pas le travail. Mettre à jour la barre de progression lors de la boucle de finition.

Êtes-vous à l'aide de jquery UI ou un cadre de travail ?
Je suis à l'aide de jQuery
La mise à jour de la barre de progression lors de la boucle de finition.</j'ai> Pas vraiment, c'est tout simplement trop rapide pour distinguer chaque mise à jour. 😉
pas vraiment, j'essaie de la progressBar.max = 10000000 avant la boucle et toujours immédiatement de remplissage de la barre de progression

OriginalL'auteur Taras Kravets | 2013-02-08

  1. 3

    Je ne l'aime que pour un mannequin progressbar :

    Html

    <div id="progress">
    <span class="progress-text"></span>
    <div class="progress-bar"></div>
</div>

    Css

    #progress {
    position:relative;
    width:250px;
    height:20px;
    border:1px solid red;
}

#progress .progress-bar {
    background:blue;
    height:20px;
    width:0%;
    display:inline-block;
}

#progress .progress-text {
    position:absolute;
    z-index:2;
    right:0;
}

    JQuery

    $(document).ready(function() {
    var progression = 0,
    progress = setInterval(function() 
    {
        $('#progress .progress-text').text(progression + '%');
        $('#progress .progress-bar').css({'width':progression+'%'});
        if(progression == 100) {
            clearInterval(progress);
            alert('done');
        } else
            progression += 10;

    }, 1000);
});

    jsFiddle

    Vous pouvez utiliser le JQueryUI Progressbar trop !

    Merci @soyuka, très utile!

    OriginalL'auteur soyuka

  2. 3

    J'ai du mal avec ce, pendant plusieurs jours, et enfin ce que j'avais appris en solution plutôt simple, qui met un bouton et une barre de progression sur une page HTML.

    Lorsque le bouton est cliqué, javascript commence un décompte, et met à jour la barre de progression comme le comte progresse. Le comte est réglé à une valeur par défaut de 4321 dans la définition de bouton, mais vous pouvez changer n'importe quelle valeur que vous choisissez.

    <!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Progress Bar Demo</title>
<script>
var button;
var count;
var countmax;
var progressbar;
var timerID;

function start(max) {
    button = document.getElementById("button");
    count = 0;
    countmax = max;
    progressbar = document.getElementById("bar");
    progressbar.max = countmax;

    timerID = setInterval(function(){update()},10);
}//end function

function update() {
    button.innerHTML = "Counting to " + countmax;
    count = count + 100;
    progressbar.value = count;
    if (count >= countmax) {
        clearInterval(timerID);
        button.innerHTML = "Ready";
        progressbar.value = 0;
    }//end if
}//end function

</script>
</head>

<body>
<p>
    <button onclick="start(4321)" id="button" style="font-size:18px;">Ready</button><br>
    <br>
    <progress id="bar" value="0"></progress>
</p>
</body>
</html>

    OriginalL'auteur Allan S

  3. 1

    Vous avez besoin d'écrire une boucle asynchrone à l'aide de setTimeout comme ceci:

    var counter = 0;
(function asyncLoop() {

    $('#progressBar').val(counter++);
    if (counter <= 100) {
        setTimeout(asyncLoop, 50);
    }
})();

    OriginalL'auteur Roger C

  4. 0
    $("#progressBar").prop("value",i);

    devez définir la valeur de propriété de tout ce que je est dans cette boucle

    OriginalL'auteur Wryte

  5. 0
    $("#progressbar").progressbar({ value: i });

    OriginalL'auteur user2051770

  6. 0

    Je sais que le post est vieux, mais juste au cas où quelqu'un a besoin d'un peu de temps:

    $("progress").val(i);

    va changer la valeur de progression de la base sur la valeur i.

    Titre d'exemple, pour l'upload d'une image vous pouvez utiliser le jquery-forme de bibliothèque <script src="http://malsup.github.com/jquery.form.js"></script>. Donc, vous pouvez mettre à jour votre progress balise html dans le uploadProgress fonction de cette bibliothèque comme suit:

    uploadProgress: function(event, position, total, percentComplete) {
    progressBar.val(percentComplete);
},

    Voir la démo de jquery-forme ici et le mélanger avec la au-dessus de la connaissance, si vous souhaitez utiliser progress tag et être un peu plus clair dans le codage.

    J'espère que cela aide quelqu'un.

    OriginalL'auteur Mahsa2

  7. 0

    Méfiez-vous des "doivent être assez" délais d'attente, ils dépendent fortement de la machine chaque vitesse.
    J'ai découvert que $('progress#id').text(Math.random()) les forces de l'INTERFACE utilisateur pour les redessiner.

    OriginalL'auteur bandie