Mam kod HTML. I potrzebuje trochę kodu JavaScript do aktualizacji wartości w każdej iteracjiJak zmienić pasek postępu w pętli?
<progress id="progressBar" max="100" value="0"></progress>
for (i = 0; i <= 100; i ++) {
//update progress bar
}
staram się zrobić coś takiego:
var progressBar = document.getElementById("progressBar");
progressBar.value += i;
Ale to nie działa. Aktualizuje pasek postępu po zakończeniu pętli.
zrobiłbym to jak dla manekinowego paska postępu:
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);
});
Można użyć JQueryUI Progressbar też!
Dzięki @soyuka, bardzo przydatny! – Eduardo
Musisz napisać asynchronicznej pętli przy użyciu setTimeout tak:
var counter = 0;
(function asyncLoop() {
$('#progressBar').val(counter++);
if (counter <= 100) {
setTimeout(asyncLoop, 50);
}
})();
$("#progressBar").prop("value",i);
należy ustawić wartość właściwości do cokolwiek jest w tej pętli
$("#progressbar").progressbar({ value: i });
Walczyłem z tym przez kilka dni, a na koniec dodałem to, czego się nauczyłem, do następującego, dość prostego rozwiązania, które umieszcza przycisk i pasek postępu na stronie HTML.
Po kliknięciu przycisku javascript rozpoczyna liczenie i aktualizuje pasek postępu wraz z postępem zliczania. Liczba jest ustawiona na domyślną wartość 4321 w definicji przycisku, ale można ją zmienić na dowolną wybraną wartość.
<!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>
wiem, że post jest stary, ale tylko w przypadku, gdy ktoś potrzebuje trochę czasu:
$("progress").val(i);
zmieni podstawę wartość postęp na wartości i.
Jako przykład, do przesyłania obrazu można użyć biblioteki jquery-formularz <script src="http://malsup.github.com/jquery.form.js"></script>. Tak, można zaktualizować tag progress HTML w funkcji uploadProgress tej biblioteki następujące:
uploadProgress: function(event, position, total, percentComplete) {
progressBar.val(percentComplete);
},
zobaczyć demo jQuery formie here i wymieszać ją z powyższej wiedzy, jeśli chcesz używać progress tag i być nieco bardziej wyraźne w kodowaniu.
Mam nadzieję, że to pomoże komuś.
Uwaga na limity czasu "musi wystarczyć", w dużym stopniu zależą od prędkości poszczególnych urządzeń. Odkryłem, że $('progress#id').text(Math.random()) zmusza interfejs użytkownika do ponownego rysowania.
Czy używasz tego interfejsu JQuery lub jakiegoś frameworka? – soyuka
Używam jQuery –
* Aktualizuje pasek postępu po zakończeniu pętli. * Niezupełnie, jest zbyt szybki, aby odróżnić każdą aktualizację. ;) – Yoshi