实用的Web进度条

 

1.建立进度条html页面progressbar.htm
<script language="javascript"> 

function setPgb(pgbID, pgbValue) 
{ 
    if ( pgbValue <= 100 ) 
    { 
        //debugger;
        if (lblObj = document.getElementById(pgbID+'_label')) 
        { 
            lblObj.innerHTML = pgbValue + '%'; // change the label value 
        } 
        if ( pgbObj = document.getElementById(pgbID) ) 
        { 
            var divChild = pgbObj.children[0]; 
            pgbObj.children[0].style.width = pgbValue + "%"; 
        } 
        window.status = "数据读取" + pgbValue + "%，请稍候"; 
    } 
    if ( pgbValue == 100 ) 
    {
        window.status = "数据读取已经完成"; 
        proBar.style.display="none";
        Table1.style.display="none";
    }
} 

</script>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="common.css" />
    </head>
    <body topmargin="0" leftmargin="0">
        <table width="100%" height="100%" ID="Table1" runat=server>
            <tr>
                <td align="center" valign="middle">
                    <DIV class="bi-loading-status" id="proBar" style="DISPLAY: ; LEFT: 425px; TOP: 278px">
                        <DIV class="text" id="pgbMain_label" align="left"></DIV>
                        <DIV class="progress-bar" id="pgbMain" align="left">
                            <DIV STYLE="WIDTH:10%"></DIV>
                        </DIV>
                    </DIV>
                </td>
            </tr>
        </table>
    </body>
</html>
2.建立样式common.css
.bi-loading-status { 
/*position: absolute;*/ 
width: 150px; 
padding: 1px; 
overflow: hidden; 
} 
.bi-loading-status .text { 
white-space: nowrap; 
overflow: hidden; 
width: 100%; 
text-overflow: ellipsis; 
padding: 1px; 
} 
.bi-loading-status .progress-bar { 
border: 1px solid ThreeDShadow; 
background: window; 
height: 10px; 
width: 100%; 
padding: 1px; 
overflow: hidden; 
} 
.bi-loading-status .progress-bar div { 
background: Highlight; 
overflow: hidden; 
height: 100%; 
filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); 
} 
3.建立测试页面
3.1html代码
<HTML>
    <HEAD>
        <title>progressbar</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    </HEAD>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">            
            <%=fixedHeader()%>
        </form>
    </body>
</HTML>
3.2cs代码
首先using
using System.Threading;
using System.IO;
using System.Text;
然后添加代码
public class progressbar : System.Web.UI.Page
    {
        Page_Load

        fixedHeader

        ThreadProc

        LoadData

        Web Form Designer generated code
    }
4.源代码下载/Files/singlepine/processbar.rar
posted @ 2010-08-31 19:20  你妹的sb  阅读(333)  评论(0)  编辑  收藏  举报
百度一下