<progress> 标签
<progress> 标签用于表示任务的完成进度。它可以显示一个进度条，表示任务的完成情况。
属性
- value: 指定当前任务的完成进度。取值范围为 0 到 1，默认值为 0。
- max: 指定任务的总进度。默认值为 1。
方法
- setProgress(value): 设置任务的完成进度为指定值。
- increaseProgress(value): 增加任务的完成进度。
示例代码
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>Progress Bar Example</title>
</head>
<body>
<progress id="progressBar" value="0" max="100"></progress>
<button onclick="increaseProgress()">Increase Progress</button>
<script>
function increaseProgress() {
var progressBar = document.getElementById("progressBar");
if (progressBar.value < progressBar.max) {
progressBar.value += 10;
}
}
</script>
</body>
</html>在上面的示例代码中，我们创建了一个进度条 <progress>，并添加了一个按钮，点击按钮会增加进度条的完成进度。
| 属性 | 描述 |
|---|---|
| labels | 返回进度条的标签的列表 (如果有的话) |
| max | 设置或者返回进度条 max 属性的值 |
| position | 返回当前进度条的位置 |
| value | 设置或者返回进度条 value 属性的值 |