<progress> 元素可以与 JavaScript 结合使用，以显示正在进行的任务或流程的进度。
<progress> 标签不应与 <meter> 标签（代表仪表）混淆。
句法
<progress> 标记通常 <progress value="" max=""></progress> 与开始和结束标记内的任何内容一样编写。该内容可以是可以显示给旧版浏览器（即不支持该 <progress> 元素的浏览器）的当前值和/或最大值。
value 属性表示当前值（即当前进度所在的位置）。如果您省略此属性，进度条将变为“不确定”，并且不会显示任何进度（但大多数浏览器会显示动画条以向用户指示它正在尝试...）。
max 属性表示总量（即进度条完成时的值）。
像这样：
<progress value="250" max="1000">
<span>25</span>%
</progress>
例子
基本标签使用
<progress value="250" max="1000">
<span>25</span>%
</progress>不确定的进度条
您可以通过删除value 属性使进度条“不确定” 。
<progress max="1000">
<span>25</span>%
</progress>
JavaScript 示例
这是一个使用 JavaScript 动态修改 <progress> 元素值的快速示例。
<button onClick="displayProgress()">Run Progress Bar</button>
<progress id="downloadProgress" value="0" max="30">Hello</progress>
<span id="message"></span>
<script>
var milisec = 0
var max = 30
function displayProgress() {
if (milisec >= max) {
document.getElementById('message').innerHTML = "Done!";
}
milisec += 1;
document.getElementById('downloadProgress').value = milisec;
setTimeout("displayProgress()", max);
}
</script>完整例子
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<progress value="250" max="1000">
<span>25</span>%
</progress>
<progress max="1000">
<span>25</span>%
</progress>
<button onClick="displayProgress()">Run Progress Bar</button>
<progress id="downloadProgress" value="0" max="30">Hello</progress>
<span id="message"></span>
<script>
var milisec = 0
var max = 30
function displayProgress() {
if (milisec >= max) {
document.getElementById('message').innerHTML = "Done!";
}
milisec += 1;
document.getElementById('downloadProgress').value = milisec;
setTimeout("displayProgress()", max);
}
</script>
</body>
</html>
2020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
