asp.net进度条实现。。

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

实现的是一个假的进度条，就是一直在转，不用的时候可以隐藏掉就行；

代码：

 <style type ="text/css">
        .loading{ border:1px solid #000000; width:200px; background:#ECF2FF; margin-right:auto; margin-left:auto; } 
        .loading div{ float:left; font-size:1px; border:1px solid #ECF2FF; background:#6699CC; width:10px; height:12px; } 
    </style>


<div id="load" runat="server" >
            <table>
                <tr id="trLoad">
                    <td nowrap align="center" style="color: Red; font-size: 12px; color: red" colspan="2">
                        正在上传文件中，请稍候……
                        <br />
                        <marquee class="loading" direction="right" scrollamount="5" scrolldelay="10">
                       <div></div><div></div><div></div><div></div><div></div><div></div></marquee>
                    </td>
                </tr>
            </table>
        </div>

图片效果：

应用：导入成功后滚动条会自动隐藏

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <style type ="text/css">
        .loading{ border:1px solid #000000; width:200px; background:#ECF2FF; margin-right:auto; margin-left:auto; } 
        .loading div{ float:left; font-size:1px; border:1px solid #ECF2FF; background:#6699CC; width:10px; height:12px; } 
    </style>
    <script type="text/javascript">
        function isimport() {
            if (confirm("如存在重复数据，系统将会覆盖原数据，是否确定导入？")) {
                document.getElementById("load").style.display = "block";
                return true;
            }
            else {
                return false;
            }
        }
      
    </script>
  
   
</head>
<body>
   <form id="form1" runat="server">
    
    <asp:FileUpload ID="GetUploadFileContent" runat="server"  />
    <asp:Button ID="btnUpload" runat="server" Text="导入" OnClick="btnUpload_Click" OnClientClick=" return isimport()"></asp:Button>
      <div id="load" runat="server" style=" display:none;" >
            <table>
                <tr id="trLoad">
                    <td nowrap align="center" style="color: Red; font-size: 12px; color: red" colspan="2">
                        数据正在导入中，请稍候……
                        <br />
                        <marquee class="loading" direction="right" scrollamount="5" scrolldelay="10">
                       <div></div><div></div><div></div><div></div><div></div><div></div></marquee>
                    </td>
                </tr>
            </table>
        </div>
        
  <div></div>
  <div>
   <asp:TextBox runat="server" ID="ee" TextMode="MultiLine" Width="600px" Height="500px" BorderStyle="None"></asp:TextBox>
  </div>

    </form>
</body>
</html>