您的位置:首页> 前端教程> HTML教程
文章导航

HTML <progress> 进度条

2019-3-27 13:46| 作者: admin| 查看: 1338| 评论: 0|来自: 蚂蚁部落

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

模拟实现进度条可以参阅JavaScript 动态进度条效果一章节。

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

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

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

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  进度条演示:<br/>
  <progress value="20"  max="100"></progress>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/27/134824gh6b4d1iidbj882i.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

(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.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  loadding加载效果:<br/>
  <progress max="100"></progress>
</body>
</html>

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

二.设置进度条位置:

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

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
  进度条演示:<br/>
  <progress value="50"  max="100"></progress>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/27/134911wcxjpyk4lgwwxwxw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(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.softwhy.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,本文不再进行介绍,可以自行在网上查询。

相关阅读:

(1).setTimeout参阅JavaScript setTimeout()一章节。

(2).document.getElementById参阅document.getElementById()一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:Data:URL 图片下一篇:HTML <meter> 计量条

最新评论

返回顶部