JS倒计时进度条

设置进度条宽度  <div id="p" style="height:10px;background:red;width:0px;"></div>
  <script>var p=document.getElementById('p');var i=0;var a=setInterval(function(){i+=1;p.style.width=i+"px";if(i==100)clearInterval(a)},20);</script>

解决方案 »

  1.   

    已经知道了开始时间和结束时间，那你就计算中间有多少秒或者多少毫秒，然后根据你的进度条的长度，计算出每毫秒前进多少。比如结束时间减去开始时间是3000ms，进度条的长度是900px，那么每毫秒就是0.9px，进度是 0.9*t/900
      

  2.   


    0.9*t的t是什么？
    t是当前的时间呀。下面的代码是一个简单的例子， $ibar 表示内部蓝色的进度条   now*100/900  是当前的进度。一会儿给你写一个完整的例子
    $ibar.animate(
    {
    "width":"900px"
    }, 
    {
    duration: 3000,
    step:function(now, fx){
    console.log(now*100/900);
    }
    }
    );
      

  3.   

    看看这个具体的例子，你可以搜一下jQuery的animate()的具体使用方法
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>进度条</title>
        <style type="text/css">
            .progress{width: 900px; height: 16px; background-color: #CCC; position: relative;}
            .progress .ibar {width: 0px; height: 16px; background-color: #9370DB; position: absolute;}
            .progress .num{position: absolute;}
        </style>
    </head>
    <body>
        <div class="content">
            <div class="progress">
                <div class="ibar" id="ibar"></div>
                <div class="num" id="num">0</div>
            </div>
        </div>
    </body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#ibar").animate(
                {"width":"900px"},
                {
                    duration:3000,
                    easing:"linear",
                    step: function(now, fx){
                        $("#num").css({"left":now+"px"}).html(parseInt(now/9));
                    }
                }
            )
        })
    </script>
    </html>