前端HTML入门——progress 进度条

2024-03-14 21:55:47

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

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

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

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

首先看一段代码实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softdewhy.com/" />
<title>兴趣部落</title>
</head>
<body>
  进度条演示：<br/>
  <progress value="20"  max="100"></progress>
</body>
</html>

代码运行效果截图如下：

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

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

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

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

一.作为loadding进度条：

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softdewhy.com/" />
<title>兴趣部落</title>
</head>
<body>
  loadding加载效果：<br/>
  <progress max="100"></progress>
</body>
</html>

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

二.设置进度条位置：

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

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

代码实例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softdewhy.com/" />
<title>兴趣部落</title>
</head>
<body>
  进度条演示：<br/>
  <progress value="50"  max="100"></progress>
</body>
</html>

代码运行效果截图如下：

代码分析如下：

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

（2）.max设置为100。

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

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

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

三.动态效果演示：

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

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

代码实例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softdewhy.com/" />
<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，本文不再进行介绍，可以自行在网上查询。

最后，给大家推荐一个前端学习进阶内推交流圈子（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（会定期免费提供一些收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

愿大家都能在编程这条路，越走越远。

码农公寓

相关文章