HTML progress
最后一次修改 2017年08月04日
HTML progress
progress元素可用于指示任务的逐渐完成。它有两个局部属性： value，max，form 。
value属性定义当前进度，它在零和max属性的值之间。
当省略max属性时，比例在0和1之间。使用浮点数表示进度，例如30％的0.3。
例子
下面的代码显示了progress元素和一些按钮。按下按钮可更新progress元素显示的值。
<!DOCTYPE HTML>
<html>
<body>
<progress id="myprogress" value="10" max="100"></progress>
<p>
<button type="button" value="30">30%</button>
<button type="button" value="60">60%</button>
<button type="button" value="90">90%</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
var progress = document.getElementById("myprogress");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
progress.value = e.target.value;
};
}
</script>
</body>
</html>