Javascript进度条的实现原理

Javascript实现的进度条原理，大家来讨论讨论它实现的原理，知道了原理了实现起来就比较容易了。

解决方案 »

  1.   

    两个div叠加，一个长度慢慢增长到和另一个相同即可
      

  2.   

    给大家一个我收藏滴，<html xmlns="http://schemas.microsoft.com/intellisense/html-401">
    <head>
        <title>一个JS做的相当漂亮的进度条 www.qpsh.com</title>
    </head>
    <body>   
    </body>
    <script type="text/jscript">
    function DoubleAnimation(target,targetProperty,from,to,Duration)
    {
        this.Begin=function anonymous()
        {
            target[targetProperty]=from;
            var starttime=new Date();
            setTimeout(StoryBoard(),1);
            function StoryBoard()
            {
                return function()
                {                 
                    var now=new Date();
                    var d=now.getTime()-starttime.getTime();
                    target[targetProperty]=Math.round(from+(to-from)*d/Duration);
                    if(d<Duration)setTimeout(StoryBoard(),10);
                }
            }
        }
        this.setTo=function(val){to=val;}
        this.setFrom=function(val){from=val;}
    } 
    function ProgressBar(ID)
    {
        document.write( "<div id=\""+ID+"\" style=\"position:absolute;top:10%;width:100; left: 108px;\">        <image src=\"http://www.qpsh.com/icon/emptypb.jpg\" style=\"position: absolute;left: 84px; top: 137px;\" />        <div id=\""+ID+"pb\" style=\"position: absolute; left: 86px; top: 137px;z-index:5;overflow:hidden;width:130;\" >            <img src=\"http://www.qpsh.com/icon/iconfullpb.jpg\"/>           <div id=\""+ID+"highlight\" style=\"background:#ffffff;left: -500px; position: absolute; top: -1px;width:100;height:20;filter:Alpha(Opacity=75,FinishOpacity=0,Style=2)\"></div>        </div>        <div style=\"position:absolute;top:83px;width:180px; left: 148px;\">        加载中请稍候......        </div>   </div>");    var story=new DoubleAnimation(document.getElementById(ID+"highlight").style,"left",-100,324,2000)
        var stophandle=setInterval(story.Begin,2000);
        this.set=function(percentage)
        {
            document.getElementById(ID+"pb").style.width=Math.round(percentage*329/100);
        }
    }
    var pb1=new ProgressBar("ok");
    var p=0;
    function loading()
    {
    pb1.set(p+=0.3);
    if(p<100)
    setTimeout(loading,2);
    else
    window.location.href="http://news.qq.com";

    }
    loading();</script>
    </html>
      

  3.   

    楼上的很漂亮，可惜不支持 FF.LZ可以参考 http://www.songlecn.com/2009/03/492/ DEMO: http://www.songlecn.com/wp-content/supload/2009/03/14/index.html
      

  4.   

    进度条即时计算下载量很麻烦,没有接触过.大概需要服务端设置标志位什么的.输出到达哪个位置,就响应按比率给出下载div的宽不过觉得很没必要,js也不好做的.和服务端的数据交互就是个问题通常估计一下下载时间就可以了.比如一个下载需要10秒
    那么你用js做出一个14秒左右的效果,等指示到100%,在允许继续操作.其实在10秒时,数据已经准备完毕
      

  5.   

    计算时间不太可行，楼主可以参考一下：http://www.jslab.org.cn/?tag=preload
      

  6.   

    一个Div两个Div都行依据XmlHttpRequest状态吧，貌似一共5个状态，前一个状态基本瞬间就过去了，如果按100%这个进度，那就是一块一块增长了。如果要具体到Server处理进度，那就专项功能专项设计了，注意定制个自己的标准就行了。