HTML <progress> 进度条

小灰灰 2020-05-15 18:20 981阅读 0赞

HTML `<progress>` 进度条

HTML5之前没有自带的进度条效果，只能通过JavaScript结合CSS模拟实现。

大家知道，版本的更新通常意味着功能的增强与便利性的提高，HTML也不例外。

HTML5新增`<progress>`标签，可以将其用在文件上传与下载的进度显示。

也可以将其作为简单的loadding加载状态提示效果，下面将对其进行详细介绍。

首先看一段代码实例：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
</head>
<body>
  进度条演示：<br/>
  <progress value="20"  max="100"></progress>
</body>
</html>
```

代码运行效果截图如下：

![](/images/1589566771288.png)

此标签具有的主要属性如下：

（1）.max：整数或者浮点数，用于表示进度条的总量，默认值是1。

（2）.value：整数或者浮点数，表示当前进度条的进度。

后面结合代码实例对这两个属性的一些细节进行详细说明。

**一.作为loadding进度条：**

loadding进度条或者加载等待效果能够给浏览者较为人性化的提示。

progress标签可以实现比较简单的上述效果，只要将<progress>标签置入页面，不设置value属性值即可。

其实很容易理解，不设置value属性值，也就不知道当前进度在何处，于是显示出一个loadding状态。

在不同的浏览器显示的状态不同，代码实例如下：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
</head>
<body>
  loadding加载效果：<br/>
  <progress max="100"></progress>
</body>
</html>
```

运行后此标签呈现一种动态效果，非常简单不多介绍。

**二.设置进度条位置：**

既然是进度条控件，自然可以设置当前所在的进度。

所谓的进度其实就是value属性值与max属性值数值比例的在进度条外观上的一种体现。

代码实例如下：

代码运行效果截图如下：

![](/images/1589566742148.png)

代码分析如下：

（1）.value属性值设置为50。

（2）.max设置为100。

（3）.进度条当前完成的进度其实就是value/max比例位置，所以上述进度条完成一半。

（4）.max属性值默认为1，如果显式设置，那么值必须是大于0的整数或者浮点数。

（5）.value属性值必须是介于0-max之间，于是如果没有显式设置max值，那么value必须介于0.01~1.0之间。

**三.动态效果演示：**

此控件在实际项目中通常用于显示加载或者下载等效果的进度，是一个动态效果。

这自然要结合JavaScript来实现，下面就演示一段简单的代码实例供大家参考。

代码实例如下：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<script>
window.onload=function(){
  var p=document.getElementById("p");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    goprogress()
  }
  function goprogress(){
    gotoend(p,0);
  }
  function gotoend(p,value){
    var value=value+1;
    p.value=value;
    if(value<100) {
      setTimeout(function(){gotoend(p, value);},20)
    }else{
      setTimeout(function(){alert("全部加载完成")},20);
    }
  }
}
</script>  
</head>
<body>
<progress id="p" value="0" max="100"></progress>
<br>
<input type="button" value="查看效果" id="bt"/>
</body>
</html>
```

点击按钮可以实现进度条加载效果，对代码简单分析如下：

（1）.进度条控件之所以呈现视觉上的动态效果是通过定时器函数每隔20毫秒递归调用一次gotoend函数。

（2）.每调用一次gotoend函数，可以将value值加1，于是就出现了动态效果。

（3）.当value值等于100，那么弹出完成提示。

当然实际应用中，此控件都是需要和服务器进行交互实时显示文件上传下载进度。

比如可以结合ajax或者FileReader，本文不再进行介绍，可以自行在网上查询。