HTML进度标签

本文概述

HTML <progress>标记用于显示任务的进度。它为Web开发人员提供了一种在网站上创建进度栏的简便方法。它主要用于显示网页上文件上传的进度。

HTML进度标记是HTML5中的新增功能, 因此你必须使用新的浏览器。


HTML进度标签的属性

HTML <progress>标记支持全局和事件属性以及2个特定属性。

标签 描述
value 它定义了任务已完成多少工作。
max 它定义了任务总共需要多少工作。

进度标签应仅用于表示任务的进度, 而不仅仅是指标(磁盘速度使用情况)。为此, 使用<meter>元素。


HTML进度标签示例

让我们看一下没有属性的HTML进度示例。

<progress></progress>

立即测试

输出:


让我们看一下带有value和max属性的进度示例。

Downloading progress:
<progress value="43" max="100"></progress>

立即测试

输出:

下载进度:


样式进度栏

你可以在进度标签上应用CSS代码。

progress{
  width: 300px;
  height: 30px;
}

立即测试

输出:


带有JavaScript的HTML进度标签

<progress>标记应与JavaScript结合使用以显示任务的进度。

<script>
var gvalue=1;
function abc(){
 var progressExample = document.getElementById ('progress-javascript-example');
     setInterval (function ()
    { 
                 if(gvalue<100){
                    gvalue++;
                    progressExample.value =gvalue;  
                  }
                 abc();            
      }, 1000);
}
</script>
<progress id="progress-javascript-example" min="1" max="100"></progress>  
<br/><br/>
<button onclick="abc()">click me</button>

立即测试

输出:

点击我


支持的浏览器

Element Chrome IE Firefox Opera Safari
<progress> Yes Yes Yes Yes Yes
微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?