Tar*_*ets 5 javascript loops progress-bar
我有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;
但这不起作用.它在循环完成时更新进度条.
小智 5
我为此苦苦挣扎了好几天，最后将我所学到的知识融入到以下相当简单的解决方案中，该解决方案在 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>
我会像虚拟进度条那样做：
网页
<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！