显示进度条

 

 1 < html >
 2 < head >
 3    < title > Helene - Syntax Highlighting Editor in Javascript </ title >
 4    < script  language ="javascript" >
 5
 6//显示进度条
 7function showBar(ImageID, Position, MaxPosition)
 8{
 9    var objImg = document.getElementById(ImageID);
10    objImg.src="GrowPic.gif";
11    var objImgNext;
12    
13    Position=Position+1;
14    if(Position <= MaxPosition)
15    {
16      objImgNext = "Bar" + Position;
17    }

18    else
19    {
20        //重置状态为初始值
21        var objImgNew;
22        for(var i=1;i<=MaxPosition;i++)
23        {
24            objImgNew = document.getElementById('Bar'+i);
25            objImgNew.src="GrowPicBG.gif";
26        }

27        objImgNext = "Bar1";
28        Position = 0;
29        
30    }

31        //设置显示下一幅图片
32    setTimeout("showBar('"+objImgNext+"', "+Position+","+MaxPosition+")",100);
33}

34
35//创建图片资源,用于进度条显示时使用
36function CreateImages(varCounts)
37{
38    var varInnerText="";
39    for(var i=1;i<=varCounts;i++)
40    {
41        varInnerText += "<img id='Bar"+i+"' src='GrowPicBG.gif' alt='' />"
42    }

43    document.all.ProgressBarID.innerHTML=varInnerText;
44}

45      
</ script >
46       
47 </ head >
48 < body  onload ="document.All['Loading'].style.visibility=none" >
49          < div  id ="Loading"  style ="z-index: 12000 left: 0px; width: 100%;
50         cursor: wait; position: absolute; top: 0px; height: 100%"  runat ="server" >
51          < table  height ="100%"  width ="100%" >
52              < tr  valign ="middle"  align ="center" >
53                  < td >
54                      < table  style ="width: 600px; height: 300px"  bgcolor ="#336699" >
55                          < tr  valign ="middle" >
56                              < td >
57                                  < div  id ="ProgressBarID" ></ div >
58                                   < script  type =text/javascript  language =javascript > CreateImages(30);showBar('Bar1',0,30); </ script >        
59                              </ td >
60                          </ tr >
61                      </ table >
62                  </ td >
63              </ tr >
64          </ table >
65      </ div >
66          < form  name ="form1"  method ="post"  action ="Default2.aspx"  id ="form1" >
67
68
69 </ body >
70 </ html >
71

<html>
<head>
  <title>Helene - Syntax Highlighting Editor in Javascript</title>
  <script language="javascript">

//显示进度条
function showBar(ImageID, Position, MaxPosition)
{
 var objImg = document.getElementById(ImageID);
 objImg.src="GrowPic.gif";
 var objImgNext;
 
 Position=Position+1;
 if(Position <= MaxPosition)
 {
   objImgNext = "Bar" + Position;
 }
 else
 {
  //重置状态为初始值
  var objImgNew;
  for(var i=1;i<=MaxPosition;i++)
  {
   objImgNew = document.getElementById('Bar'+i);
   objImgNew.src="GrowPicBG.gif";
  }
  objImgNext = "Bar1";
  Position = 0;
  
 }
  //设置显示下一幅图片
    setTimeout("showBar('"+objImgNext+"', "+Position+","+MaxPosition+")",100);
}

//创建图片资源,用于进度条显示时使用
function CreateImages(varCounts)
{
 var varInnerText="";
 for(var i=1;i<=varCounts;i++)
 {
  varInnerText += "<img id='Bar"+i+"' src='GrowPicBG.gif' alt='' />"
 }
 document.all.ProgressBarID.innerHTML=varInnerText;
}
   </script>
   
</head>
<body onload="document.All['Loading'].style.visibility=none">
     <div id="Loading" style="z-index: 12000 left: 0px; width: 100%;
        cursor: wait; position: absolute; top: 0px; height: 100%" runat="server">
        <table height="100%" width="100%">
            <tr valign="middle" align="center">
                <td>
                    <table style="width: 600px; height: 300px" bgcolor="#336699">
                        <tr valign="middle">
                            <td>
                          <div id="ProgressBarID"></div>
         <script type=text/javascript language=javascript>CreateImages(30);showBar('Bar1',0,30);</script>    
       </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
  <form name="form1" method="post" action="Default2.aspx" id="form1">


</body>
</html>

你可能感兴趣的:(进度条)