HTML5中的进度条progress元素简介及兼容性处理


Posted in HTML / CSS onJune 02, 2016

一、progress元素基本了解
1.基本UI
progress元素属于HTML5家族,指进度条。IE10+以及其他靠谱浏览器都支持。如下简单code:

XML/HTML Code复制内容到剪贴板
  1. <progress>o(︶︿︶)o</progress>  

是个很带感的进度条吧。有人奇怪:“唉~怎么我看到的是个字符表情捏?” 恩…我只能对你说:“鄙视你,丫的都舍不得用靠谱点的浏览器吗?!”
这个默认的效果,不同浏览器下的效果不尽相同,如下截图们(window 7下):
HTML5中的进度条progress元素简介及兼容性处理

IE10颗粒的缓动聚散效果,还是挺让人眼前一亮的。

2.基本属性
max, value, position, 以及labels.
(1)max指最大值。若缺省,进度值范围从0.0~1.0,如果设置成max=100, 则进度值范围从0~100.
(2)value就是值了,若max=100, value=50则进度正好一半。value属性的存在与否决定了progress进度条是否具有确定性。什么意思?比方说<progress></progress>没有value,是不确定的,因此IE10浏览器下其长相是个无限循环的虚点动画;但是,一旦有了value属性(即使无值),如<progress value></progress>, 也被认为是确定的,虚点动画进入仙人模式——>变条条了,如下截图:
HTML5中的进度条progress元素简介及兼容性处理

(3)position是只读属性,顾名思意,当前进度的位置,就是value / max的值。如果进度条不确定,则值为-1.
(4)labels也是只读属性,得到的是指向该progress元素的label元素们。例如document.querySelector("progress").labels,返回的就是HTMLCollection, 下为我的某测试截图(截自Opera浏览器下,目前FireFox18.0.2以及IE10貌似都不支持)。

二、progress元素兼容性处理示例
html代码

XML/HTML Code复制内容到剪贴板
  1. <progress max="100" value="20"><ie style="width:20%;"></ie></progress>  

css兼容代码

CSS Code复制内容到剪贴板
  1. progress {   
  2.     displayinline-block;   
  3.     width160px;   
  4.     height20px;   
  5.     border1px solid #0064B4;     
  6.     background-color:#e6e6e6;   
  7.     color#0064B4/*IE10*/  
  8. }   
  9. /*ie6-ie9*/  
  10. progress ie {   
  11.     display:block;   
  12.     height: 100%;   
  13.     background#0064B4;   
  14. }   
  15. progress::-moz-progress-bar { background#0064B4; }   
  16. progress::-webkit-progress-bar { background#e6e6e6; }   
  17. progress::-webkit-progress-value  { background#0064B4; }  

基本上完美的解决了各浏览器的差别。

HTML / CSS 相关文章推荐
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
html解决浏览器记住密码输入框的问题
May 07 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 #HTML / CSS
h5调用摄像头的实现方法
Jun 01 #HTML / CSS
HTML5拖拽的简单实例
May 30 #HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 #HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 #HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 #HTML / CSS
深入理解HTML的FormData对象
May 17 #HTML / CSS
You might like
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
Python中bisect的用法
2014/09/23 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
python简单实现获取当前时间
2016/08/27 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
详解python3中的真值测试
2018/08/13 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Python 元组操作总结
2019/09/18 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
个人自我鉴定写法
2013/11/30 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
卖车协议书
2014/04/21 职场文书
励志演讲稿200字
2014/08/21 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书