web-dev-qa-db-fra.com

jQuery barre de minuterie de progression

J'ai une barre de minuterie de progression dans jQuery - voici un exemple http://jsfiddle.net/6h74c/

Si j'ai des valeurs de temps en millisecondes (600000 = 10 minutes, 300000 = 5 minutes, etc.), comment puis-je incrémenter la barre pour cette période?

Dans le lien jsfiddle, j'essaie de régler la barre de progression sur 835000 ms.

Cependant, setTimeout () détermine la fréquence à laquelle la barre augmentera. Elle se base également sur le pourcentage de largeur, ce qui ne semble pas être exact. Devrais-je le faire différemment?

function updateProgress(percentage) {
    $('#pbar_innerdiv').css("width", percentage + "%"); // probably not ideal
    $('#pbar_innertext').text(percentage + "%");
}

function animateUpdate() {
    perc++;
    updateProgress(perc);
    if(perc < 835000) {
        timer = setTimeout(animateUpdate, 50); // probably not ideal either?
    }
}
javascriptjquerytimerprogress-bar
9
Darius

Fiddle Exemple

Je ferais quelque chose comme:

var start = new Date();
var maxTime = 835000;
var timeoutVal = Math.floor(maxTime/100);
animateUpdate();

function updateProgress(percentage) {
    $('#pbar_innerdiv').css("width", percentage + "%");
    $('#pbar_innertext').text(percentage + "%");
}

function animateUpdate() {
    var now = new Date();
    var timeDiff = now.getTime() - start.getTime();
    var perc = Math.round((timeDiff/maxTime)*100);

    if (perc <= 100) {
        updateProgress(perc);
        setTimeout(animateUpdate, timeoutVal);
    }
}
11
fanfavorite

Faites simplement du bon vieux calcul mathématique. Cela ne semble pas juste parce que vous donnez le pourcentage de largeur comme valeur du "tick" qui finira par être 835000! Cela signifie que vous avez finalement une largeur de "835000%" !!!

Exemple

var timer = 0,
    perc = 0,
    timeTotal = 835000,
    timeCount = 50;

function updateProgress(percentage) {
    var x = (percentage/timeTotal)*100,
        y = x.toFixed(3);
    $('#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() {
        clearTimeout(timer);
        perc = 0;
        animateUpdate();
    });
});
4
SpYk3HH

jsFiddle Demo

Description

Cela augmente simplement la progression toutes les 10 ms ... puisque vous connaissez le temps qu'il faut, prenez ce temps et divisez-le par 100, puis définissez votre intervalle de temps dans var timer = setInterval(updateProgressbar, 10);

HTML

<div id="progressbar"></div>

JS

var progress = 0;
var timer = setInterval(updateProgressbar, 10);

function updateProgressbar(){
    $("#progressbar").progressbar({
        value: ++progress
    });
    if(progress == 100)
        clearInterval(timer);
}

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

JS Fiddle Juste pour vous

JS

var progress = 0;
var timer = setInterval(updateProgressbar, 8350);

function updateProgressbar(){
    $("#progressbar").progressbar({
        value: ++progress
    });
    if(progress == 100)
        clearInterval(timer);
}

$(function () {
    $("#progressbar").progressbar({
        value: progress
    });
});
3
abc123

Vous voulez probablement quelque chose comme ça:

var currentTime = new Date().getTime();
perc = (currentTime - StarTime)/duration;

Si cette option est définie sur StartTime, vous pouvez également calculer le pourcentage à chaque mise à jour.

0
Perry