我有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 页面上放置了一个按钮和一个进度条。
单击按钮时，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>
关于javascript - 如何在循环中更改进度条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14774245/