详解HTML5中的进度条progress元素简介及兼容性处理
一、progress元素基本了解
1.基本知识
progress元素属于HTML5家族,指进度条。IE10+以及其他靠谱浏览器都支持。
注释:Internet Explorer 9 以及更早的版本不支持 <progress> 标签。
<progress> 标签标示任务的进度(进程)
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>, 也被认为是确定的,
(3)position是只读属性,当前进度的位置,就是value / max的值。如果进度条不确定,则值为-1.
(4)labels也是只读属性,得到的是指向该progress元素的label元素们。例如document.querySelector("progress").labels,返回的就是HTMLCollection。
二、progress元素兼容性处理示例
<p class="progressbar"><progress max="100" value="10"><ie style="width:10%;"></ie></progress></p>
样式:progress {display: inline-block;width:100%;height: 5px;border-radius: 5px;overflow: hidden;float: left;}
/*ie6-ie9*/
progress ie {display:block;height: 100%;background: #ff8a00; }
progress::-moz-progress-bar { background: #ff8a00; }
progress::-webkit-progress-bar { background: #e5e5e5; }
progress::-webkit-progress-value { background: #ff8a00; }
详解HTML5中的进度条progress元素简介及兼容性处理的更多相关文章
- 详解HTML5中rel属性的prefetch预加载功能使用
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率 ...
- video详解 HTML5中的视频:
一.video 视频的方法.属性.事件详解 方法:play() 播放 pause() 暂停 属性:currentTime播放到当前的时间 duration视频的总时长 事件:ended 播放完 ...
- 详解HTML5中的<aside>元素与<article>元素
<aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.<aside>元素通常显示成 ...
- 详解 HTML5 中的 WebSocket 及实例代码-做弹幕
原文链接:http://www.php.cn/html5-tutorial-363345.html
- 简直要逆天!超炫的 HTML5 粒子效果进度条
我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...
- html5 svg 圆形进度条
html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- [转]人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata)
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营( ...
- 如何在UIAlertView中显示进度条
今天这个问题是,在一个iPhone程序中,我要在后台做大量的数据处理,希望在界面上显示一个进度条(Progress Bar)使得用户了解处理进度.这个进度条应该是在一个模态的窗口中,使界 今天这个问题 ...
- 深入详解SQL中的Null
深入详解SQL中的Null NULL 在计算机和编程世界中表示的是未知,不确定.虽然中文翻译为 “空”, 但此空(null)非彼空(empty). Null表示的是一种未知状态,未来状态,比如小明兜里 ...
随机推荐
- CSS浮动并清除浮动(造成的影响)
一.浮动 CSS浮动 CSS float浮动的深入研究.详解及拓展(一) CSS浮动属性Float详解 块级元素独占一行 块级元素,在页面中独占一行,自上而下排列,也就是传说中的流. 可以 ...
- Oracle基础之分析表
analyze table tablename compute statistics; analyze index indexname compute statistics; (analyze 不会重 ...
- 根据viewport的size自动调整fontsize大小
现在的网站必须要考虑mobile上访问的友好性,bootstrap作为mobile first的前端框架得到很多应用,它通过默认就使用.col-xs-xx定义的width,同时加上@media(min ...
- C# 使用 Invoke 实现函数的白盒 UT 测试
公有方法可以直接调用,但是一些非公开的方法,在覆盖率测试的时候也需要覆盖,可以使用 Invoke 来调用. 调用方法如下,其中 this 可以改为被调用的方法所属的类名,通过 BindingFlags ...
- 【Leetcode】【Medium】Divide Two Integers
Divide two integers without using multiplication, division and mod operator. If it is overflow, retu ...
- 105 + 106. Construct Binary Tree from Preorder and Inorder Traversal (building trees)
Given preorder and inorder traversal of a tree, construct the binary tree. Note: You may assume that ...
- ClipboardJS 实现JS复制到剪切板
根据官方文档的说法这个支持IE9+以及大部分主流浏览器,地址:https://clipboardjs.com/ 下面写个简单的例子:HTML:注意,这里最好是button,并非所有的元素都支持该JS ...
- poj3259 Wormholes【Bellman-Ford或 SPFA判断是否有负环 】
题目链接:poj3259 Wormholes 题意:虫洞问题,有n个点,m条边为双向,还有w个虫洞(虫洞为单向,并且通过时间为倒流,即为负数),问你从任意某点走,能否穿越到之前. 贴个SPFA代码: ...
- 显卡 GPU 关系
https://zhidao.baidu.com/question/1238935513507031339.htmlGraphic Processing Unit,意思就是图形处理器啊,显卡的由GPU ...
- mac git 命令自动补全
步骤如下: 1.下载Git-completion.bash 或者直接使用SourceTree去clone到本地. 下载地址:https://github.com/markgandolfo/git-ba ...