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

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

下载进度条怎么实现Java_javascript

下载进度条怎么实现Java_javascript_02

下载进度条怎么实现Java_css3_03

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

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了吧,转起来嘛角度越来越大就好了啊


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

下载进度条怎么实现Java_前端_04