HTML5中的进度条progress元素简介及适配性解决

日期:2021-02-24 类型:科技新闻 

关键词:在线抠图,稿定抠图,在线抠图透明图片,可以抠图的软件,凡科制图

1、progress元素基础掌握
1.基础UI
progress元素属于HTML5大家族,指进度条。IE10+和别的可靠访问器都适用。以下简易code:

XML/HTML Code拷贝內容到剪贴板
  1. <progress>o(︶︿︶)o</progress>  

是个很带感的进度条吧。有人怪异:“唉~如何我看到的是个标识符小表情捏?” 恩…我只能对你说:“瞧不起你,丫的都舍不可用可靠点的访问器吗?!”
这个默认设置的实际效果,不一样访问器下的实际效果不尽同样,以下截图们(window 7下):

IE10颗粒物的缓动散聚实际效果,還是挺令人眼下1亮的。

2.基础特性
max, value, position, 和labels.
(1)max指最大值。若缺省,进度值范畴从0.0~1.0,假如设定成max=100, 则进度值范畴从0~100.
(2)value便是值了,若max=100, value=50则进度恰好1半。value特性的存在与否决策了progress进度条是不是具备明确性。甚么意思?比如说<progress></progress>沒有value,是不确定性的,因而IE10访问器下其相貌是个无尽循环系统的虚点动漫;可是,1旦有了value特性(即便无值),如<progress value></progress>, 也被觉得是明确的,虚点动漫进到神仙方式——>变条条了,以下截图:

(3)position是写保护特性,顾名思意,当今进度的部位,便是value / max的值。假如进度条不确定性,则值为⑴.
(4)labels也是写保护特性,获得的是指向该progress元素的label元素们。比如document.querySelector("progress").labels,回到的便是HTMLCollection, 下为我的某检测截图(截自Opera访问器下,现阶段FireFox18.0.2和IE10貌似都不适用)。

2、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; }  

基础上完善的处理了各访问器的区别。

上一篇:html5中canvas图表完成柱状图的示例 返回下一篇:没有了