首页 前端知识 HTML5使用<progress>进度条、<meter>刻度条

HTML5使用<progress>进度条、<meter>刻度条

2024-09-28 23:09:15 前端知识 前端哥 613 784 我要收藏

1、<progress>进度条

定义进度信息使用的是 progress 标签。它表示一个任务的完成进度,这个进度可以是不确定的,只是表示进度正在进行,但是不清楚还有多少工作量没有完成,也可以用0到某个最大数字(如:100)之间的数字来表示准确的完成情况(如:进度百分比)。

 progress 标签的属性:

属性说明
value

表示已经完成了多少工作量

max

表示总共有多少工作量

【实例】在网页中使用 progress 标签添加进度条。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>使用进度条</title>

    <script type="text/javascript">
        function button_onclick() {
            for (var i = 0; i <= 100; i++)
                updateProgress(i);
        }
        function updateProgress(newValue) {
            var progressBar = document.getElementById('p');
            progressBar.value = newValue;
            document.getElementsByTagName('span')[0].textContent = newValue;
        }
    </script>
</head>

<body>
    <section>
        <h2>progress元素的使用实例</h2>
        <p>完成百分比: <progress id="p" max=100></progress><span>0</span>%</p>
        <input type="button" onClick="button_onclick()" value="请点击" />
    </section>
</body>

</html>

执行结果:

 

2、<meter>刻度条

定义刻度信息使用的是 meter 标签,该标签用来表示规定范围内的数量值,如磁盘使用量比例、关键词匹配程度等。

需要注意的是,meter 标签不可以用来表示那些没有已知范围的任意值,例如:重量、高度,除非已经设定了这些值的范围。

meter 标签的属性:

属性说明
value当前标量的实际值
min当前标量的最小值
max当前标量的最大值
low当前标量的低值区
high当前标量的高值区
optimum最佳值,其范围在最小值与最大值区间当中

【实例】在网页中使用 meter 标签添加刻度条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="pan_junbiao的博客">
    <title>使用刻度条</title>
</head>
<body>
    <p>磁盘使用量:<meter value="50" min="0" max="160">50/160</meter> GB</p>
    <p>你的得分是:<meter value="91" min="0" max="100" low="10" high="90" optimum="100"></meter> A+</p>
</body>
</html>

执行结果:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18660.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!