私はhtmlコードを持っています。そして、反復ごとに値を更新するためのJavaScriptコードが必要です
<progress id="progressBar" max="100" value="0"></progress>
for (i = 0; i <= 100; i ++) {
//update progress bar
}
私はこのようなことをしようとします:
var progressBar = document.getElementById("progressBar");
progressBar.value += i;
しかし、これはうまくいきません。ループ終了時に進行状況バーを更新します。
ダミーのプログレスバーの場合は次のようにします：
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);
});
JQueryUI Progressbarも使用できます。
私はこれに数日間苦労し、最終的に学んだことを次の非常に単純な解決策に取り入れました。これは、HTML ページにボタンとプログレスバーを配置するものです。
ボタンがクリックされると、javascript がカウントを開始し、カウントの進行に合わせてプログレス バーを更新します。ボタン定義では、カウントはデフォルト値の 4321 に設定されていますが、任意の値に変更できます。
<!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>
次のように setTimeout を使用して非同期ループを記述する必要があります。
var counter = 0;
(function asyncLoop() {
$('#progressBar').val(counter++);
if (counter <= 100) {
setTimeout(asyncLoop, 50);
}
})();
投稿が古いことは知っていますが、誰かがそれを必要とする場合に備えて:
$("progress").val(i);
value に基づいて進捗値を変更しますi。
例として、画像をアップロードするには jquery-form ライブラリを使用できます<script src="http://malsup.github.com/jquery.form.js"></script>。したがって、このライブラリprogressの関数で次のように html タグを更新できます。uploadProgress
uploadProgress: function(event, position, total, percentComplete) {
progressBar.val(percentComplete);
},
タグを使用してコーディングをもう少し明確にしたい場合は、ここで jquery-form のデモを見て、上記の知識と組み合わせてください。progress
誰かの役に立てば幸いです。
「十分でなければならない」タイムアウトに注意してください。タイムアウトは各マシンの速度に大きく依存します。$('progress#id').text(Math.random())UIを強制的に再描画することを発見しました。
$("#progressBar").prop("value",i);
プロパティ値をそのループ内にあるものに設定する必要があります
$("#progressbar").progressbar({ value: i });