如何使用 HTML5 的 meter 和 progress 标签创建进度条？-JavaScript中文网-JavaScript教程资源分享门户

如何使用 HTML5 的 meter 和 progress 标签创建进度条？

推荐答案

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    ----- --------------- ---------------------------- -------------------
    ------------ - -------- ---------------
    -------
        ------------------- -
            -------------- -----
        -
    --------
-------
------

    --------- ---------
    ---- ---------------------------
       ------ -------------------------------
       ------ --------------- ---------- ------- --------- -------- --------- --------------------- ---
    ------
     ---- ---------------------------
       ------ -------------------------
       ------ ------------ ------------ ------- ------- --------- ------------------- ---
    ------
    
    ------------ ---------
    ---- ---------------------------
      ------ ----------------------------
      --------- ------------- ---------- --------------------- ---
    ------
      ---- ---------------------------
       ------ --------------------------
       --------- ----------- ----------- ------------------- ---
    ------


    --------
     -- ------ --------
        ----- --------------- - ------------------------------------
        --- ------------- - --

        -------------- -- -
            -- -------------- - ---- -
                ------------- -- ---
                --------------------- - --------------
                ---------------------------------------------- - --------------------
            -
        -- -----
    ---------
-------
-------

本题详细解读

Meter 标签

meter 标签用于显示度量值，例如磁盘空间使用情况，或者某个请求的关联性。它不是简单的进度条，更侧重于展示一个在已知范围内的数值。

关键属性：

value: 当前的数值。
min: 范围的最小值，默认为0。
max: 范围的最大值，默认为1。
low: 低值，如果value小于该值，则表示为低。
high: 高值，如果value大于该值，则表示为高。
optimum: 最优值。

使用场景:

展示磁盘空间使用率。
展示电量。
表示某个指标的健康程度。

示例说明:

在上述示例中，disk-usage 的 meter 标签表示一个磁盘使用情况的度量，value 是70， min是0，max 是100，low和high定义了低和高值，optimum定义了最优值，表示当前状态在合理范围内。battery的meter标签表示了电量，值的范围是0到1。

Progress 标签

progress 标签用于显示一个任务的进度，比如文件下载或者上传进度。

关键属性：

value: 当前的进度值。
max: 完成进度所需的值。

使用场景:

文件上传、下载进度。
步骤流程进度。
加载进度。

示例说明:

在上述示例中，download 的 progress 标签表示一个下载进度，value是60，max是100。upload的 progress标签表示了上传进度， value是0.3，max是1。注意，如果 max的值不为 1，那么value的值必须小于max。

JavaScript 动态更新

progress 标签通常会配合 JavaScript 来动态更新 value 属性，从而展示动态的进度变化。上面的例子中，script 标签内的代码模拟了 download 进度条的动态更新，每隔 500 毫秒将 value 增加 10，直到 100 为止。注意，需要同时更新 progress 标签旁边显示的百分比。

区别总结

meter 是显示一个已知范围内的度量值，有最优值、高低范围的概念，更侧重于展示当前数值在整体范围内的含义。
progress 是显示一个任务的进度，只有当前值和最大值两个关键属性，更侧重于展示任务的完成程度。

纠错
反馈