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”，或者扫描下方的二维码吧！

 

本文来源于王业楼的个人博客，本文地址：

欢迎分享本文，转载请注明本文出处和地址