Làm thế nào để thay đổi thanh tiến trình trong vòng lặp?

Tôi có mã html. Và tôi cần một số mã javascript cho giá trị cập nhật trên mỗi iterationLàm thế nào để thay đổi thanh tiến trình trong vòng lặp?

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


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

tôi cố gắng làm một cái gì đó như thế này:

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

Nhưng điều này không làm việc. Nó cập nhật thanh tiến trình khi kết thúc vòng lặp.

Nguồn

2013-02-08 Taras Kravets

Bạn đang sử dụng giao diện người dùng jquery hoặc một số khung công tác với điều này? – soyuka

Tôi đang sử dụng jQuery –

* Nó cập nhật thanh tiến trình khi kết thúc vòng lặp. * Không thực sự, nó chỉ là quá nhanh để phân biệt từng bản cập nhật riêng lẻ. ;) – Yoshi

tôi sẽ làm điều đó như cho thanh tiến trình giả:

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

Bạn có thể sử dụng JQueryUI Progressbar quá!

Nguồn

2013-02-08 14:24:17 soyuka

Cảm ơn @soyuka, rất hữu ích! – Eduardo

Bạn cần phải viết một vòng lặp không đồng bộ sử dụng setTimeout như thế này:

var counter = 0; 
(function asyncLoop() { 

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

Nguồn

2013-02-08 14:06:11

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

nên thiết lập giá trị tài sản để bất cứ điều gì tôi là trong vòng lặp mà

Nguồn

2013-02-08 14:06:13 Wryte

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

Nguồn

2013-02-08 14:08:11 user2051770

Tôi đã vật lộn với điều này trong vài ngày, và cuối cùng đặt những gì tôi đã học vào giải pháp khá đơn giản sau đây, đặt một nút và một thanh tiến trình trên trang HTML.

Khi nút được nhấp, javascript bắt đầu đếm và cập nhật thanh tiến trình khi tiến trình đếm. Số đếm được đặt thành giá trị mặc định là 4321 trong định nghĩa nút, nhưng bạn có thể thay đổi giá trị đó thành bất kỳ giá trị nào bạn chọn.

<!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>

Nguồn

2014-06-20 07:30:44

Tôi biết bài này là cũ, nhưng chỉ trong trường hợp ai đó cần nó một thời gian:

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

sẽ làm thay đổi cơ sở giá trị tiến bộ về giá trị i.

Như một ví dụ, để tải lên một hình ảnh mà bạn có thể sử dụng jquery dạng thư viện <script src="http://malsup.github.com/jquery.form.js"></script>. Vì vậy, bạn có thể cập nhật thẻ progress html của bạn trong uploadProgress chức năng của thư viện này như sau:

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

Xem các bản demo của jquery-form here và trộn nó với những kiến thức trên nếu bạn muốn sử dụng progress thẻ và được một chút rõ ràng hơn trong việc viết mã.

Tôi hy vọng nó sẽ giúp ai đó.

Nguồn

2016-03-27 19:47:49

Hãy coi chừng thời gian chờ "phải đủ", chúng rất phụ thuộc vào tốc độ của từng máy. Tôi phát hiện ra rằng $('progress#id').text(Math.random()) buộc giao diện người dùng vẽ lại.

Nguồn

2016-10-22 09:02:40 bandie

Làm thế nào để thay đổi thanh tiến trình trong vòng lặp?

Trả lời

Các vấn đề liên quan