📄 progressbar.aspx

📁 内容管理内容管理内容管理内容管理内容管理
💻 ASPX
字号:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ProgressBar.aspx.cs" Inherits="MyDemo.Progress.ProgressBar_Default" %>

<!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 runat="server">
    <title>Web进度条</title>
    <link rel="stylesheet" type="text/css" href="../css/main.css"/>
    <script language=javascript>
    function go()
    {
        clearBar();
        
        setTimeout("getProgress()", 1000);
    }
    
    var count=1;
    
    function getProgress()
    {
        
         //MyDemo.Progress.ProgressBar_Default.GetProgress(count, getProgress_callback);//ie6适用       
         var res = MyDemo.Progress.ProgressBar_Default.GetProgress(count);//ie7适用
         
         var percent_complete = res.value;
         count=count+1;
         var progress = document.getElementById("progress");
         var progressPersent = document.getElementById("progressPersent");
         progress.width = percent_complete + "%";
         progressPersent.innerHTML = percent_complete + "%";
         
             
         if (count<=10)
            setTimeout("getProgress()", 1000);
         else
         {
            var complete = document.getElementById("complete");
            complete.innerHTML = "完成";
         }
 
    }
    
    /*
    function getProgress_callback(res)//ie6适用
    {
         var percent_complete = res.value;
         count=count+1;
         var progress = document.getElementById("progress");
         var progressPersent = document.getElementById("progressPersent");
         progress.width = percent_complete + "%";
         progressPersent.innerHTML = percent_complete + "%";
    }
    */
    
     function clearBar() {
       var progress_bar = document.getElementById("progressBar");
       var progressPersent = document.getElementById("progressPersent");
       var complete = document.getElementById("complete");
       progress_bar.style.visibility = "visible"
       progressPersent.innerHTML = "&nbsp;";
       complete.innerHTML = "正在工作中.....";
     }
    </script>
</head>
<body>
    <form id="form1" runat="server">
<div class=content>
<h1>简易Web进度条实现</h1>
    <div id="progressBar" style="padding:0px;border:solid black 0px;visibility:hidden">
    <table width="300" border="0" cellspacing="0" cellpadding="0"  align="center">
      <tr>
        <div align="center" id="progressPersent">86%</div>
      </tr>
      <tr >
        <td>
     <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#000000">
      <tr>
        <td>
     <table width="1%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FF0000" id="progress">
                  <tr>
                    <td>&nbsp;</td>
                  </tr>
                </table></td>
      </tr>
    </table>
    </td>
      </tr>
      <tr>
        <td align="center" id="complete">completed</td>
      </tr>
      
    </table>
    </div>
    <div align=center>
    <button value="开始" onclick="go();">开始</button>
    
    
    </div>
</div>
    </form>
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -