100分求java,javascript 或jsp实现的进度条模式程序例子

求java,javascript 或jsp实现的进度条模式程序例子，
描述：点击按钮后，页面显示任务执行的百分比，下面进度条慢慢的变长，直到任务执行完毕后，跳到结果页面。
最好有注释。谢谢各位大虾的不吝赐教先。

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head> 
        <title>进度条--阿会楠练习作品</title> 
        <style type="text/css"> 
        body{ 
            text-align:center; 
        } 
       .graph{ 
            width:450px; 
            border:1px solid #F8B3D0; 
            height:25px; 
       } 
       #bar{ 
            display:block; 
            background:#FFE7F4; 
            float:left; 
            height:100%; 
            text-align:center; 
       } 
       #barNum{ 
            positon:absolute; 
       } 
        </style> 
        <script type="text/javascript"> 
        function $(obj){ 
            return document.getElementById(obj); 
        } 
        function go(){ 
            $("bar").style.width = parseInt($("bar").style.width) + 1 + "%"; 
            $("bar").innerHTML = $("bar").style.width; 
            if($("bar").style.width == "100%"){ 
                window.clearInterval(bar); 
            }     } 
        var bar = window.setInterval("go()",50); 
        window.onload = function(){ 
            bar; 
        } 
        </script> 
    </head> 
    <body> 
    <div class="graph"> 
        <strong id="bar" style="width:1%;"></strong> 
    </div> 
    </body> 
    </html> 
    这个不错，通俗易懂，跳转部分你去改造吧
      

  2.   

    网上很多啊，看看这个
    http://blog.csdn.net/java_283066589/archive/2007/03/17/1532118.aspx
      

  3.   

    <html>
    <head>
    <title>正在載入</title>
    <meta http-equiv="Content-Type" c>
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
    <table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">
    <tr> 
    <form name=loading>
    <td align=center> 
    <p><font color=gray>正在載入首頁，請稍候.......</font></p>
    <p> 
    <input type=text name=chart size=46 style="font-family:Arial; 
    font-weight:bolder; color:gray;
    background-color:white; padding:0px; border-style:none;">
    <br>
    <input type=text name=percent size=46 style="font-family:Arial; 
    color:gray; text-align:center; 
    border-width:medium; border-style:none;">
    <script>var bar = 0 
    var line = "||" 
    var amount ="||" 
    count() 
    function count(){ 
    bar= bar+2 
    amount =amount + line 
    document.loading.chart.value=amount 
    document.loading.percent.value=bar+"%" 
    if (bar<99) 
        {
    setTimeout("count()",100);
        } 
    else 
        {
    window.location = "http://www.zcool.com.cn/";} 
        }
    </script>
    </p>
    </td>
    </form>
    </tr>
    </table>
    </body>
    </html>
              进度条是“|||||” 按照百分比增加的。挺实用美观的。你可以按照自己的需求进行改造的。而且也不难。
      

  4.   

    <style>
    #load{width:500px;height:25px;border:1px #000 solid;}
    #loading{position:absolute;z-index:2;height:23;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=#39867b);}
    #loadtext{position:absolute;z-index:3;width:100%;height:100%;line-height:23px;text-align:center;}
    </style>
    <div id="load"><div id="loading"></div><div id="loadtext">1%</div></div>
    <script>
    var i=0;
    function test(){
    i++;
    document.getElementById("loading").style.width = i + "%";
    document.getElementById("loadtext").innerText = i + "%";
    if(i<100)setTimeout("test()",200);
    }
    setTimeout("test()",200);
    </script>
      

  5.   

    一开始我也觉得很难，后来自己写了个，也不算太难。
    用Ajax启动Servlet，此Servlet会把进度信息放入Session中，然后在页面中Ajax请求获得Session中的进度信息，再配合js和css完成进度。