实际项目中发现,HTML5 的meter和progress控件虽然都可以实现进度显示,但综合考虑下来progress兼容性比较好些。meter控件在IOS ipad/iphone似乎都显示不正确。
①用progress控件控制
<progress value="10" max="100"></progress>
读者可以测试下,这个在各种浏览器环境下是基本工作的(IE10+以及其他靠谱浏览器都支持)。
【注意】控制条的宽度一定要用value的方式来设定,直接用width='100px'是没有用的
用meter控件
<meter id='progress' style='width:100px' value='50' min='1' max='100'></meter>
读者可以测试下,这个在苹果环境下是不工作的。
【注意】控制条的宽度一定要用value的方式来设定,直接用width='100px'是没有用的
一、progress元素基本了解
<progress>不支持progress标签</progress>
当浏览器不支持该标签时,便会显示出标签里的内容,效果:
基本属性
max, value, position, 以及labels.
①max指最大值。若缺省,进度值范围从0.0~1.0,如果设置成max=100, 则进度值范围从0~100.
②value就是值了,若max=100, value=50则进度正好一半。value属性的存在与否决定了progress进度条是否具有确定性。
什么意思?比方说<progress></progress>没有value,是不确定的,因此IE10浏览器下其长相是个无限循环的虚点动画;但是,一旦有了value属性(即使无值),如<progress value></progress>, 也被认为是确定的,虚点动画——>变条条了,如下截图:(IE10 添加value后变条)
③position是只读属性,顾名思意,当前进度的位置,就是value / max的值。如果进度条不确定,则值为-1.
④labels也是只读属性,得到的是指向该progress元素的label元素们。例如document.querySelector("progress").labels,返回的就是HTMLCollection, 下为我的某测试截图(截自Opera浏览器下,目前FireFox18.0.2以及IE10貌似都不支持):
Opera浏览器下的测试结果:
因为<progress>标签兼容到IE10+,所以这里需要解决IE兼容
【好的兼容做法】
对于IE6~IE9浏览器,模拟进度条效果,如果不使用背景图片的话,一般而言,至少需要2层标签。我们需要再额外的徒增2层标签??No, no, no! 外部的progress标签已经替我们做了一半的工作,因为,progress所对应的CSS样式,也是IE6~9浏览器需要的(高宽,边框色背景色什么的),因此,我们只需要再额外塞1层标签就可以了,这个标签对应的就是已经完成的进度条的样式。
<progress max="100" value="20"><ie style="width:20%;"></ie></progress>
我们需要怎样的CSS代码呢?如下,标红的部分与兼容处理所增加的,都是无伤大雅,不需要hack补丁的。
progress { display: inline-block; width: 160px; height: 20px; border: 1px solid #0064B4; background-color:#e6e6e6; color: #0064B4; /*IE10*/ } /*ie6-ie9*/ progress ie { display:block; height: 100%; background: #0064B4; } progress::-moz-progress-bar { background: #0064B4; } progress::-webkit-progress-bar { background: #e6e6e6; } progress::-webkit-progress-value { background: #0064B4; }
当然,progress以及自定义的ie元素,ie6~8都是不认识的,我们需要打个动态补丁,如下:
if (typeof window.screenX !== "number") { document.createElement("progress"); document.createElement("ie"); }
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>进度条兼容</title> <style type="text/css"> progress { display: inline-block; width: 160px; height: 20px; border: 1px solid #0064B4; background-color:#e6e6e6; color: #0064B4; /*IE10*/ } /*ie6-ie9*/ progress ie { display:block; height: 100%; background: #0064B4; } progress::-moz-progress-bar { background: #0064B4; } progress::-webkit-progress-bar { background: #e6e6e6; } progress::-webkit-progress-value { background: #0064B4; } </style> <script> if (typeof window.screenX !== "number") { document.createElement("progress"); document.createElement("ie"); } </script> </head> <body> <progress max="100" value="20"><ie style="width:20%;"></ie></progress> </body> </html>
【注意】progress以及自定义的ie元素,ie6~8都是不认识的,我们需要打个动态补丁,js位置需在DOM节点之前。
二.无需考虑兼容的条形进度条
原理:嵌套DIV
<!doctype html> <html> <body> <div style="width: 30%;height: 20px;border: #00B83F solid 1px;"><!--控制进度条大小--> <div style="width: 80%;background-color: #00B83F;height: 20px;"></div><!--进度条--> </div> </body> </html>
可以在里div的内部或右边加个百分比显示。
这种条形进度条在任何浏览器下都可以显示,ie5都行!这种条形进度条常常与ligerUI等等结合应用。
想要动态?写JavaScript就行啦~
三.简单模拟下下载进度跑条
<h4>加载进度</h4> <input type="button" value="下载" onclick="DownloadStart();" /> <progress id="Download" value="" max="100"></progress> <script> function DownloadStart() { alert("加载下载") var Down = document.getElementById("Download"); var i = 0; var DownSetTime; DownSetTime = setInterval(function () { i += 10 Down.value = i; if (i == 100) { clearInterval(DownSetTime); alert("加载完成") } }, 500) } </script>
当然了,真正的进度是肯定不能这样写的,因为实际上目前还没有一种方法可以判断进度的进程,因此只能让跑条一直跑,或者跑到一个顶峰然后停着等下载完成,直接跳了100%。
例一:进度条跑到90,然后等,等服务器或者其他地方传进来一个值,然后再一下子到100.
<h4>加载进度</h4> <input type="button" value="加载" onclick="LoadStart();" /> <progress id="Load" value="0" max="100"></progress> <script> function LoadStart() { var Complete = 0;//加载完成与否,初始为0,完成为1 var Load = document.getElementById("Load");//获取进度条 var i = 0;//声明跑条的初始值 //加载进度跑条 LoadSetTime = setInterval(function () { i += 10;//每500毫米跑10份 Load.value = i; if (i >= 90) {//当跑条到90时,就不跑了,停止 clearInterval(LoadSetTime); return; } }, 500); //加载完成与否 GetData = setInterval(function () { if (Complete == 1) {//当加载完成,也就等于1的时候 Load.value = 100;//跑条完成,到100 alert("加载完成"); clearInterval(GetData);//加载完成的计时器清除加载完成与否计时器 clearInterval(LoadSetTime);//加载完成的计时器清除加载进度跑条计时器 } }); //从服务器获得加载内容完成与否的值,当然了你可以定义这个值从任何地方来,比如页面加载完成,动画加载完成,图片加载完成,一个动作执行完毕等等都可以,具体看你需要用在的地方 $.post(URL, function (data) { if (parseInt(data) == 1) { Complete = 1; } }) } </script>
例二:进度条一直跑,然后等,等服务器或者其他地方传进来一个值,然后再一下子到100以后清除所有计时器,加载完成
<h4>加载进度</h4> <input type="button" value="加载" onclick="LoadStart();" /> <progress id="Load" value="0" max="100"></progress> <script> function LoadStart() { var Complete = 0;//加载完成与否,初始为0,完成为1 var Load = document.getElementById("Load");//获取进度条 var i = 0;//声明跑条的初始值 //加载进度跑条 LoadSetTime = setInterval(function () { i += 10;//每500毫米跑10份 Load.value = i; if (i == 100) { i = 0; } }, 500); //加载完成与否 GetData = setInterval(function () { if (Complete == 1) {//当加载完成,也就等于1的时候 Load.value = 100;//跑条完成,到100 clearInterval(GetData);//加载完成的计时器清除加载完成与否计时器 clearInterval(LoadSetTime);//加载完成的计时器清除加载进度跑条计时器 } }); //从服务器获得加载内容完成与否的值,当然了你可以定义这个值从任何地方来,比如页面加载完成,动画加载完成,图片加载完成,一个动作执行完毕等等都可以,具体看你需要用在的地方 $.post(URL, function (data) { if (parseInt(data) == 1) { Complete = 1; } }) } </script>
四.拓展:圆形动态进度条,这个我会在后面做总结
.