HTML DOM Progress 对象
HTML DOM Progress 对象
HTML DOM Progress 对象是 HTML5 的新特性之一,用于表示由某个任务产生的进度信息。Progress 对象可帮助开发人员创建带有进度条的网络应用程序。Progress 对象提供了许多属性和方法,以便控制进度条的外观和行为,例如设置进度条的最小值、最大值,增加进度的百分比等。
创建 Progress 对象
可以使用 document.createElement 方法来创建 Progress 对象,该方法接受一个参数,表示要创建元素的标签名,代码如下所示:
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Progress 对象</title>
</head>
<body>
<progress id="myProgress" value="50" max="100"></progress>
</body>
</html>
HTML DOM Progress 对象的属性
-
value:设置或返回进度条的当前值。该属性可设置一个0-100之间的整数值,其默认值为0。
-
max:设置或返回进度条的最大值。该属性可设置一个大于0的整数值,其默认值为1。
-
position:设置或返回当前进度条的位置。该属性可设置一个值,表示进度条的绝对位置,相对于在文档中的父元素。该属性的默认值为static。
-
form:设置或返回包含当前进度条的表单。该属性的默认值为null。
-
labels:表示一个文本标签列表显示在进度条中。每个文本标签对象都是一个 DocumentFragment 对象,并按顺序依次排列。
HTML DOM Progress 对象的方法
-
setRangeText(value):将当前 Progress 对象的活动范围的选中文本设置为指定字符串。
-
checkValidity():返回当前 Progress 对象的表单元素是否已通过验证。如果通过验证,该方法返回 true,否则返回 false。
-
reportValidity():通过此方法,可以在用户提交表单之前检查 HTML5 验证。如果表单元素通过了验证,则此方法返回 true,如果未通过,则返回 false。
HTML DOM Progress 对象的事件
-
onabort:在用户取消操作时触发。
-
onerror:在加载发生错误时触发。
-
oninput:在用户改变表单控件的值时触发。
-
onload:在加载完成时触发。
-
onreset:在重置表单之前触发。
-
onsubmit:在提交表单之前触发。
HTML DOM Progress 对象的应用
通过 Progress 对象,我们可以轻松地创建进度条,方便用户了解某个任务的实时进展情况,例如下载文件、上传文件等。代码如下所示:
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Progress 对象</title>
</head>
<body>
<progress id="myProgress" value="50" max="100"></progress>
<button onclick="addValue()">增加进度</button>
<script>
function addValue(){
var p = document.getElementById("myProgress");
p.value += 5;
}
</script>
</body>
</html>
该页面中,我们新建了一个进度条,并设置了最大值为100,当前值为50。同时,我们添加了一个“增加进度”的按钮,当用户点击该按钮时,进度条的值会以5%的速度增加,从而形成进度条的增长效果。