经典页面加载显示进度条

最新推荐文章于 2021-06-29 14:52:56 发布

bingtingabc

最新推荐文章于 2021-06-29 14:52:56 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： function div javascript dialog border asynchronous

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

第一：
<html>
<head>
<title>LOADING</title>
<script type=text/javascript>

</script>
</head>
<body οnlοad="fakeProgress(0,sb)">
<table width="699">
<td width="691" height="300">
</table>
<DIV align=center>
<DIV id=sb style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; BACKGROUND: #DCDCDC; WIDTH: 400px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 14px; TEXT-ALIGN: left">
<DIV id=sbChild1 style="FILTER: Alpha(Opacity=0, FinishOpacity=80, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); OVERFLOW: hidden; WIDTH: 100%; POSITION: absolute; HEIGHT: 12px">
<DIV style="BACKGROUND: #000000; WIDTH: 100%" hidden overflow: height:12px;></DIV></DIV>
<DIV style="FONT-SIZE: 10px; WIDTH: 400px; COLOR: white; FONT-FAMILY: arial; POSITION: absolute; HEIGHT: 14px; TEXT-ALIGN: center"></DIV></DIV>
<P></P>
<DIV id=infor style="FONT-SIZE: 11px; WIDTH: 100%; COLOR: #999999; FONT-FAMILY: arial; POSITION: relative; HEIGHT: 14px; TEXT-ALIGN: center"></DIV></DIV>
</body>
</html>
第二：

<HTML>
<HEAD>
<TITLE>yaosansi</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
</HEAD>
<BODY BGCOLOR="#EAEAEA">

<form name=loading>
<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">
<tr>
   <TD align="center" valign="top">
   <p><FONT color="000000" face="Arial"><BR>
      页面载入中，请等待</FONT></p>
   <p><input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:black; background-color:#EAEAEA; padding:0px; border-style:none;">
<br>
<input type=text name=percent size=46 style="font-family:Arial; color:black; background-color:#EAEAEA;text-align:center; border-width:medium; border-style:none;">
<script>var bar = 0
var line = "||"
var amount ="||"
count()
function count(){
bar= bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count()",200);}
else
{window.location = "/";}
}
</script></p></TD>
</tr>
</table>
</FORM>

<</BODY>
</HTML>
第三：

<html>
<head>
<title>渐变效果进度条</title>
<script language="javascript">
var i;
function go()
{
bar_width = document.getElementById("bg").clientWidth;
i = bar_width;
setTimeout('start();',300);
}
function start()
{
if(i-->0)
{
   ps.style.width = i;
   bn.innerHTML = Math.floor((bar_width-i)/bar_width*100)+"%";
   setTimeout('start();',20);
}
}

</script>
<style type="text/css">
#bg {
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr=#FFFF00, EndColorStr=#FF0000);
width:300px;
height:20px;
border:1px solid black;
z-index:0;
position:absolute;
}
#ps {
float:right;
background-color:#FFFF00;
width:100%;
}
#bn {
position:absolute;
text-align:center;
width:100%;
height:100%;
cursor:default;
}
</style>
</head>
<body οnlοad="go();">
<div id="bg"><div id="ps"></div><span id="bn">0%</span></div>
</body>
</html>
第四：

<html>
<head>
<title>页面loading...效果</title>
</head>
<body>
<div id=process>LOADING...</div>
<script>
var num=0;
function mypro()
{
num++;
myarray=new Array('#494949','#646464','#747474','#888888','#969696','#A8A8A8','#B6B6B6','#C6C6C6','#D7D7D7','#E1E1E1','#F0F0F0','#F9F9F9')
process.style.color=myarray[num-1]
process.innerText=process.innerText+'■';
if(num<12) {setTimeout("mypro()",1000);}
else {window.open("http://xyhhxx.com.ru","new");}
}
mypro();
</script>
<body>
</body>
</html>
第五：

<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
<title>预加载中....</title>
<style type="text/css">

</style>
</head>
<body onLoad="location.href = url" οncοntextmenu="window.event.returnValue=false" οndragstart="window.event.returnValue=false" onselectstart="event.returnValue=false">
<script language="JavaScript">

</script>
<div align="center">
<center>
<table border="1" cellpadding="0" cellspacing="0" width="401" bordercolorlight="#808080" bordercolordark="#FFFFFF">
    <tr>
      <td bgcolor="#F5F5F5" width="402"> <div id=process style="width: 400; height: 10"> </div>
<script>
var num=0;
function mypro()
{
num++;
process.innerHTML=process.innerHTML+'<font color="#0000FF">■</font>';
if(num<26){setTimeout("mypro()",200);}else{process.innerHTML="";num=0;mypro()}
}
mypro();
</script>
</td> <script>

</script>
</tr>
</table>
</center>
</div>
<p align="center"><font class="p"><b>网站正在装载中，请稍候......</b></font></p>
</body>
</html>
第六：

<html>
<head>
<title>渐变效果进度条</title>
<script language="javascript">
var _Hex = Array("00","01","02","03","04","05","06","07","08","09",
"0A","0B","0C","0D","0E","0F","10","11","12","13","14","15","16","17","18","19",
"1A","1B","1C","1D","1E","1F","20","21","22","23","24","25","26","27","28","29",
"2A","2B","2C","2D","2E","2F","30","31","32","33","34","35","36","37","38","39",
"3A","3B","3C","3D","3E","3F","40","41","42","43","44","45","46","47","48","49",
"4A","4B","4C","4D","4E","4F","50","51","52","53","54","55","56","57","58","59",
"5A","5B","5C","5D","5E","5F","60","61","62","63","64","65","66","67","68","69",
"6A","6B","6C","6D","6E","6F","70","71","72","73","74","75","76","77","78","79",
"7A","7B","7C","7D","7E","7F","80","81","82","83","84","85","86","87","88","89",
"8A","8B","8C","8D","8E","8F","90","91","92","93","94","95","96","97","98","99",
"9A","9B","9C","9D","9E","9F","A0","A1","A2","A3","A4","A5","A6","A7","A8","A9",
"AA","AB","AC","AD","AE","AF","B0","B1","B2","B3","B4","B5","B6","B7","B8","B9",
"BA","BB","BC","BD","BE","BF","C0","C1","C2","C3","C4","C5","C6","C7","C8","C9",
"CA","CB","CC","CD","CE","CF","D0","D1","D2","D3","D4","D5","D6","D7","D8","D9",
"DA","DB","DC","DD","DE","DF","E0","E1","E2","E3","E4","E5","E6","E7","E8","E9",
"EA","EB","EC","ED","EE","EF","F0","F1","F2","F3","F4","F5","F6","F7","F8","F9",
"FA","FB","FC","FD","FE","FF");
function go()
{
setTimeout('start();',100);
}
var i=0;
function start()
{
if(i++<256)
{
   ps.innerHTML += "<span style='width:1px;background-color:#FF"+_Hex[256-i]+"00;'>";
   bn.innerHTML = Math.floor(i/2.56)+"%";
   setTimeout('start();',10);
}
}

</script>
<style type="text/css">
#ps {
background-color:#FFFF00;
width:256px;
margin: 1px;
float:left;
}
#bn {
width:39px;
margin: 1px;
float:right;
text-align:center;
color:#FFFFFF;
font-family:Arial;
font-size:13px;
}
</style>
</head>
<body οnlοad="go();">
<div style="background-color:black;width:300px;height:20px;"><div id="ps"></div><div id="bn"></div></div>
</body>
</html>
第七：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<BODY STYLE="FONT-SIZE: 10pt; FONT-FAMILY: Verdana, Arial, Helvetica">
<SCRIPT LANGUAGE="JScript">
var NUMBER_OF_REPETITIONS = 40;
var nRepetitions = 0;
var g_oTimer = null;
function startLongProcess()
{
   divProgressDialog.style.display = "";
   resizeModal();
   btnCancel.focus();
   // Add a resize handler for the window
   window.onresize = resizeModal;
   // Add a warning in case anyone tries to navigate away or refresh the page
   window.onbeforeunload = showWarning;
   //
   // Here's where you would normally kick off a long asynchronous process
   // like a file download or a remote database operation. Here, we use
   // our "long process" to simulate this process.
   //
   continueLongProcess();
}
function updateProgress(nNewPercent)
{
   // Update our pseudo progress bar
   divProgressInner.style.width = (parseInt(divProgressOuter.style.width)
      * nNewPercent / 100)+ "px";
}
function stopLongProcess()
{
   if (g_oTimer != null)
   {
      // Clear the timer so we don't get called back an extra time
      window.clearTimeout(g_oTimer);
      g_oTimer = null;
   }
   // Hide the fake modal DIV
   divModal.style.width = "0px";
   divModal.style.height = "0px";
   divProgressDialog.style.display = "none";
   // Remove our event handlers
   window.onresize = null;
   window.onbeforeunload = null;
   nRepetitions = 0;
}
function continueLongProcess()
{
   if (nRepetitions < NUMBER_OF_REPETITIONS)
   {
      // Set the timeout somewhere between 0 and .25 seconds
      var nTimeoutLength = Math.random() * 250;
      updateProgress(100 * nRepetitions / NUMBER_OF_REPETITIONS);
      g_oTimer = window.setTimeout("continueLongProcess();", nTimeoutLength);
      nRepetitions++;
   }
   else
   {
      stopLongProcess();
   }
}
function showWarning()
{
   //Warn users before they refresh the page or navigate away
   return "Navigating to a different page or refreshing the window could cause you to lose precious data./n/nAre you*absolutely* certain you want to do this?";
}
function resizeModal()
{
   // Resize the DIV which fakes the modality of the dialog DIV
   divModal.style.width = document.body.scrollWidth;
   divModal.style.height = document.body.scrollHeight;
   // Re-center the dialog DIV
   divProgressDialog.style.left = ((document.body.offsetWidth -
divProgressDialog.offsetWidth) / 2);
   divProgressDialog.style.top = ((document.body.offsetHeight -
divProgressDialog.offsetHeight) / 2);
}
</SCRIPT>
<INPUT TYPE="BUTTON" VALUE="Click Me!" οnclick="startLongProcess();">

<DIV STYLE="BORDER: buttonhighlight 2px outset; FONT-SIZE: 8pt; Z-INDEX:
4; FONT-FAMILY: Tahoma; POSITION: absolute; BACKGROUND-COLOR: buttonface;
DISPLAY: none; WIDTH: 350px; CURSOR: default" ID="divProgressDialog"
onselectstart="window.event.returnValue=false;">
   <DIV STYLE="PADDING: 3px; FONT-WEIGHT: bolder; COLOR: captiontext;
BORDER-BOTTOM: white 2px groove; BACKGROUND-COLOR: activecaption">
      Downloading Requested Document
   </DIV>
   <DIV STYLE="PADDING: 5px">
      Please wait while I download the document you requested.
   </DIV>
   <DIV STYLE="PADDING: 5px">
      This may take several seconds.
   </DIV>
   <DIV STYLE="PADDING: 5px">
         <DIV ID="divProgressOuter" STYLE="BORDER: 1px solid threedshadow;
WIDTH: 336px; HEIGHT: 15px">
            <DIV ID="divProgressInner" STYLE="COLOR: white; TEXT-ALIGN:
center; BACKGROUND-COLOR: infobackground; MARGIN: 0px; WIDTH: 0px; HEIGHT:
13px;"></DIV>
         </DIV>
   </DIV>
   <DIV STYLE="BORDER-TOP: white 2px groove; PADDING-BOTTOM: 5px; PADDING-TOP: 3px;
BACKGROUND-COLOR: buttonface; TEXT-ALIGN: center">
         <INPUT STYLE="FONT-FAMILY: Tahoma; FONT-SIZE: 8pt" TYPE="button"
ID="btnCancel" οnclick="stopLongProcess();" VALUE="Cancel">
   </DIV>
</DIV>


<DIV ID="divModal"
   STYLE="BACKGROUND-COLOR: white; FILTER: alpha(opacity=75); LEFT: 0px; POSITION:
absolute; TOP: 0px; Z-INDEX: 3"
   οnclick="window.event.cancelBubble=true; window.event.returnValue=false;">
</DIV>

</body>
</html>
第八：
<html>
<head>
<title>进度条测试</title>
<script>
        function loadBar(fl)
//fl is show/hide flag
{
var x,y;
if (self.innerHeight)
{// all except Explorer
    x = self.innerWidth;
    y = self.innerHeight;
}
else
if (document.documentElement && document.documentElement.clientHeight)
{// Explorer 6 Strict Mode
   x = document.documentElement.clientWidth;
   y = document.documentElement.clientHeight;
}
else
if (document.body)
{// other Explorers
   x = document.body.clientWidth;
   y = document.body.clientHeight;
}
    var el=document.getElementById('loader');
        if(null!=el)
        {
                var top = (y/2) - 50;
                var left = (x/2) - 150;
                if( left<=0 ) left = 10;
                el.style.position="absolute";
                el.style.visibility = (fl==1)?'visible':'hidden';
                el.style.display = (fl==1)?'block':'none';
                el.style.left = left + "px"
                el.style.top = top + "px";
                el.style.zIndex = 88;
        }
}
</script>
</head>

<body οnlοad="loadBar(0)">
<div id="loader"><table style="FILTER: Alpha(opacity=90);" class="loader" summary="Loader Layout" border="0" cellpadding="5" cellspacing="1" bgcolor="#bbbbb" >
<tr>
<td bgcolor="#FFFFFF" align="left"><p>
<img src="/edit/UploadFile/0612160917132358.gif" align="left" style="margin:3px" alt="请等待" width="94" height="17"/><strong>数据载入中...</strong><br /> <span style="font-size:8pt;">Please wait until this screen is completely loaded.</span></p></td>
</tr>
</table></div>
<script type="text/javascript" language="javascript">
    loadBar(1);
</script>
   <IFRAME name="login" scrolling="no" SRC="/"
                 WIDTH="100%" HEIGHT="100%" MARGINWIDTH="0" MARGINHEIGHT="0"
                 HSPACE="0" VSPACE="0" FRAMEBORDER="0" SCROLLING="no"> </IFRAME>

</body>
</html>

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lxwhite/archive/2009/04/13/4070550.aspx