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 相关文章推荐
让IE可以变相支持CSS3选择器
Jan 21 HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 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
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
关于Function中的bind()示例详解
2016/12/02 Javascript
js模拟微博发布消息
2017/02/23 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
Python中的两个内置模块介绍
2015/04/05 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
Django继承自带user表并重写的例子
2019/11/18 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
跟单业务员岗位职责
2014/03/08 职场文书
文明村创建实施方案
2014/03/27 职场文书
乐观自信演讲稿范文
2014/05/21 职场文书
工作会议通知
2015/04/15 职场文书
工作报告范文
2019/06/20 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python