html5新增的progress标签用处很大,它可以制作进度条,不用像以前那样用css来制作进度条!
一、progress使用方法
progress标签很好使用,他有两个属性,value和max,value表示当前进度而max表示总进度(一般可以用100)
1
|
<
progress
value
=
"50"
max
=
"100"
></
progress
>
|
二、progress如何兼容ie浏览器
用过progress标签的肯定知道,这个标签虽然好用但是不兼容ie浏览器,所以今天给大家说说如果兼容ie浏览器!我们首先用js添加progress和ie标签,因为他们在ie浏览器中不能被识别,然后我们就css将他们做成进度条就可以啦!具体看一下代码!
html代码
1
2
3
|
<
progress
id
=
"progress"
value
=
"1"
max
=
"100"
>
<
ie
id
=
"ie"
></
ie
>
</
progress
>
|
css代码
1
2
3
4
5
6
7
8
9
10
11
12
13
|
progress::-webkit-progress-bar {
background
:
#ccc
; }
progress::-webkit-progress-value {
background
:
blue
; }
progress {
display
:
block
;
width
:
162px
;
background
:
#ccc
;
}
ie {
height
:
100%
;
width
:
0%
;
display
:
block
;
background
:
blue
;
}
|
js代码
1
2
|
document.createElement(
'progress'
);
document.createElement(
'ie'
);
|
这样就能实现progress标签在所有浏览器中都兼容啦,这里还有兼容所有浏览器的页面加载进度条实例,有兴趣的可以看看!
想要每天及时获取王业楼的个人博客更新的内容吗?赶快添加微信公众号“ly89cn”,或者扫描下方的二维码吧!
本文来源于王业楼的个人博客,本文地址:http://www.ly89.cn/detailB/63.html
欢迎分享本文,转载请注明本文出处和地址