HTMLProgressElement:value 属性
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
HTMLProgressElement 接口的 value 属性表示 <progress> 元素的当前进度。
值
一个浮点数。如果未在进度条上设置 max 值,则该值的范围在 0.0 和 1.0 之间。如果设置了 max 值,则 value 范围在 0 和 max 之间。
如果 HTMLProgressElement 对象上未设置 value 属性,则进度条仍然不确定。
示例
>HTML
html
确定的进度条:<progress id="pBar"></progress> <span>0</span>%
<br />
不确定的进度条:<progress></progress>
JavaScript
js
const pBar = document.getElementById("pBar");
const span = document.getElementsByTagName("span")[0];
pBar.max = 100;
pBar.value = 0;
setInterval(() => {
pBar.value = pBar.value < pBar.max ? pBar.value + 1 : 0;
span.textContent = Math.trunc(pBar.position * 100);
}, 100);
规范
| Specification |
|---|
| HTML> # dom-progress-value> |
浏览器兼容性
Loading…