进度条功能的实现

1、HTML写法

//进度条样式隐藏

<div id="jindu" style="position:absolute;z-index:55;border:0px red solid;width:89%;height:75%;margin:10% 0 0 5%;background:rgb(0,51,102,0.6);float:left;display:none;">
　　<div id="wai">
　　　　<div id="nei" style="width: 0;">0%</div>
　　</div>
</div>

//为按钮绑定dian()方法

<div id="chuli" style="position:fixed;margin:2% 0 0 65%;width:10%;height:5%;border:1px solid white;text-align:center;border-radius: 6px;line-height:30px;" onclick="dian()">
　　<span style="color:white;font-weight:bold;font-size:14px;font-family:Microsoft YaHei;">数据处理</span>
</div>

2、JS写法

function dian () {
document.getElementById("jindu").style.display=‘‘;
var nei = document.getElementById("nei"); //找到内部div元素
var width1 = 0; //起始宽度
var id = setInterval(frame,10); //定义id，用10毫秒调用frame的值
function frame () {
if (width1>=100) {
clearInterval(id); //判断，如果宽度大于或等于100，清除
document.getElementById("jindu").style.display=‘none‘;
} else{
width1++;
nei.style.width = width1+ ‘%‘;
nei.innerHTML = width1+ "%" //在网页中写出nei的值

}
}
}

3、CSS写法

#wai{
width: 40%;
height: 30px;
border: 1px solid #99CC33;
background-color: #999999;
margin:20% 0 0 30%
}
#nei{height: 30px;
background-color: #99CC99;
text-align: center;
line-height: 30px;
color: white;
}

原文地址：https://www.cnblogs.com/gsjdeboke/p/11555872.html