自定義進度條

newroh發表於2017-08-09

很頭疼的進度條！！！

前臺程式碼

<html xmlns="http://www.w3.org/1999/xhtml">  

<head runat="server">  
    <title></title>  
    <script language="javascript" type="text/javascript">
        function set() { //用來設定進度條的長度  
            var obj, Mywidth;
            obj = document.getElementById("processbar");
            Mywidth = obj.style.width;
            Mywidth = Mywidth.replace("px", "");
            Mywidth = parseInt(Mywidth); Mywidth++;
            obj.style.width = Mywidth + "px";
        }
    </script>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div style="padding: 1px; background-color: #E6E6E6; border: 1px solid #C0C0C0; width: 300px; height: 20px;">  
     <div id="processbar" style="background-color: #00CC00; height: 18px; width: 1px;">  
        
    </div>  
    </div>  
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click"/>  
    </form>  
</body>  

</html> 


後臺程式碼

protected void Button1_Click(object sender,EventArgs e)
 {
            int i;
            string s="<script>";
            for(i=0;i<300;i++)
            {
                s+="set();";
                s=s+"</script>";
                ClientScript.RegisterStartupScript(ClientScript.GetType(),s+ i,s);
            }

 }


注：還有一點小bug：後臺在前臺註冊script指令碼的時候會在頁面顯示一大堆的指令碼執行命令。

本人能力不足有哪位牛人看到後能否給找一下原因所在，謝謝。


相關文章