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 对象的属性

  1. value：设置或返回进度条的当前值。该属性可设置一个0-100之间的整数值，其默认值为0。

  2. max：设置或返回进度条的最大值。该属性可设置一个大于0的整数值，其默认值为1。

  3. position：设置或返回当前进度条的位置。该属性可设置一个值，表示进度条的绝对位置，相对于在文档中的父元素。该属性的默认值为static。

  4. form：设置或返回包含当前进度条的表单。该属性的默认值为null。

  5. labels：表示一个文本标签列表显示在进度条中。每个文本标签对象都是一个 DocumentFragment 对象，并按顺序依次排列。

HTML DOM Progress 对象的方法

  1. setRangeText(value)：将当前 Progress 对象的活动范围的选中文本设置为指定字符串。

  2. checkValidity()：返回当前 Progress 对象的表单元素是否已通过验证。如果通过验证，该方法返回 true，否则返回 false。

  3. reportValidity()：通过此方法，可以在用户提交表单之前检查 HTML5 验证。如果表单元素通过了验证，则此方法返回 true，如果未通过，则返回 false。

HTML DOM Progress 对象的事件

  1. onabort：在用户取消操作时触发。

  2. onerror：在加载发生错误时触发。

  3. oninput：在用户改变表单控件的值时触发。

  4. onload：在加载完成时触发。

  5. onreset：在重置表单之前触发。

  6. 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%的速度增加，从而形成进度条的增长效果。

HTML DOM Password 对象 HTML DOM Radio 对象