怎样在页面上展示一个进度条？
首先我们分析一下需求：
1.进度条滚动显示的一个外框
2.进度条本身的一个显示框
3.随着时间推移，外边框没有变化，内边框的宽度逐渐变宽
4.达到某个值时，内边框宽度不再增加。
下边，我们来逐条实现：
1.进度条滚动显示的一外框以及外框内显示的进度条框
<div class="outer">//外层框
<div class="inner"></div>//内层框
</div>
2.边框样式进行修饰：
<style type="text/css">
.outer{
width: 300px;
height: 30px;
padding: 10px 0;
background: #eee;
}
.inner{
height: 30px;
width: 0px;
background: red;
}
</style>
3.让内部框宽度逐渐增加
<script>
var oInner = document.querySelectorAll(".inner")[0];//获取DOM元素。
var count = 0;//计数器，时间每前进一个单位，使其值增加一下
var timer = setInterval(function(){//定时器
count++;//每次使计数器的值增加1
oInner.style.width = count + "px";//使内部块的宽度样式值为计数器当前的值
if(count == 100){//当计数器值达到100时，清楚定时器
clearInterval(timer);//清除定时器
}
},20);//每20毫秒，定时器启动一次，内部代码执行一次，直到定时器被清掉
</script>
以上代码，我们就完成了一个简单的滚动条效果。
