需求：实现进度条功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>进度条</title>
<style type="text/css">
.outter {
margin:200px auto 0px;
600px;
height: 40px;
border: 1px solid pink;
}
.inner {
height: 40px;
0%;
background: pink;
}
.process {
margin-top:2px;
text-align: center;
}
</style>
</head>
<body>
<div class="outter">
<div class="inner"></div>
</div>
<div class="process"></div>
<script type="text/javascript">
var innerEle = document.querySelector('.inner');
var proEle = document.querySelector('.process');
var m = 0;
var timer = setInterval(function(){
innerEle.style.width = m+'%';
proEle.innerHTML = m+'%';
if (m >= 100) {
clearInterval(timer);
return;
}
m += 1;
},100)
</script>
</body>
</html>