纯javascript实现进度条-------Day22

相信“进度条”这个概念我们都不陌生，无论是在购物网站的购物进度，还是游戏网站的游戏加载，甚至视频加载过程中我们的视频读取，这些都会有可能会碰到或者说经常碰到进度条，相信如果进度条有特色的话，甚至我们可以略微的减轻一下等待的焦躁，当然也可以说，进度条在有些时候更像是我们的一个希望，同样一个在读的文件，如果没有进度条，我们压根就不知道它到底有没有在操作，我们究竟有没有操作正确，在患得患失间焦躁不安，而有了进度条，哪怕再慢，我们至少知道它在读了，所以进度条有些时候还是非常有必要的。

这样我们先上几个经典的进度条使用例子：

这几种大家想必都不陌生吧，那么接下来就要揭秘实现的真相：

1、实现的基本原理

进度条必然有其起点状态和其终点状态，分析两者之间的区别，无非是数字变了，或者说形状，或者说是颜色变了，如果单纯的只考虑这个最初和最终之间的变化，相信都不会陌生，而进度条也无非是将这个变化分步进行了，也就是让它动态化了。

我们要实现进度条的效果，说起来就是以下三步：

a、找到起点状态；

b、找到终点状态；

c、分析其可行的变化分步

2、代码实现

这样我们来实现一个最简单的，也就是最基本的，直线型进度条，类似于上面的第二幅图。

首先我们来确定其起始状态：两个嵌套的div，一个的宽度为0，一个为500；

终点状态：两个div宽度同样为500，上层div覆盖下层，显示上层div颜色

变化步骤：上层div宽度不断变长，进度的数字为下层div的宽度除以上层div的宽度的值，上层div颜色与下层div颜色不同

a、来编码实现起始状态

<span style="font-size:12px;"><div id="box" style="width:300px;height:20px;background:#ccc;text-align:left;margin:100px auto 0 auto;">
  <div id="Loading" style="color:#fff;font-size:12px;width:0px;height:20px;background:red;text-align:center;position: absolute;"></div>
</div></span>

宽度为0，高度相等，postion为absolute，这些都是略微关键的地方

b、来分步进行变化，到终点状态截止

<span style="font-size:12px;"><script type="text/javascript">
window.οnlοad=function(){
	   var idiv=document.getElementById('Loading');
	   var ibox=document.getElementById('box');
	   var timer=null;
	   
	   timer=setInterval(function(){
	           var iWidth=idiv.offsetWidth/ibox.offsetWidth*100;
	           idiv.style.width=idiv.offsetWidth+1+'px';
		   idiv.innerHTML=Math.round(iWidth)+"%";	
		   if(iWidth==100){
	              clearInterval(timer);	
	           }
	   },1);
}
</script></span>

这样就实现进度条了吧，就是让内层div宽度不断变宽而已，至于圆形的，不会忘记上一篇文章的tranform了吧，转起来嘛角度越来越大就好了啊

明天放假了哦，可感觉还是有好多东西要做啊，额，应该说还是挺幸福的，至少可以做一切想做的技术嘛，要好好规划下，加油