动态页面加载进度条
動態頁面加載進度條
將以下部分添加到<head>和</head>之間
<style type="text/css">
<!--
.p {? font-family: "MS Shell Dlg"; font-size: 12px}
-->
</style>
<script language="javascript">
function LoadFinish(){
document.all('LoadProcess').style.visibility = "hidden";
}
</script>
將以下部分添加到頁面中即可
<body οnlοad="LoadFinish()" οncοntextmenu="window.event.returnValue=false" οndragstart="window.event.returnValue=false" onselectstart="event.returnValue=false">
<div id="LoadProcess" style="position:absolute; left:35%; top:111px; width:200px; height:28px; z-index:1; visibility: visible" class="font12">?
? <table width="100%" border="0" cellspacing="1" cellpadding="5" height="26" class="font_12_a" bgcolor="#000000">
??? <tr>?
????? <td align="center" bgcolor="#FFFFFF">
??????? <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>
<!--
if (document.layers)
? document.write('<Layer src="' + url + ' " VISIBILITY="hide"> </Layer>');
? else
?? if (document.all || document.getElementById)
?? document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>');
else location.href = url;
//-->
</script>
</tr>
</table>
</center>
</div>
<p align="center"><font class="p"><b>網站正在裝載中，請稍候......</b></font></p>
????? </td>
??? </tr>
? </table>
</div>
另一個頁面加載進度條
<HTML>
<TITLE>loadpage</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
.unnamed1 {? background-color: #000000}
-->
</style>
</head>
<body>
<table border=0 cellpadding=0 cellspacing=0 width="100%" height="100%">
<tr>
<form name=loading>
????? <td align=center>
??????? <p align="center"> </p>
??????? <p align="center"><font color="#00FF00" size="2"></font></p>
??????? <p>
????????? <input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder;
color:#00FF00; background-color:black; padding:0px; border-style:none;">
????????? <br>
????????? <br>
????????? <input type=text name=percent size=46 style="font-family:Arial; color:#00FF00;
text-align:center; border-width:medium; border-style:none;" class="unnamed1">
????????? <br>
????????? <br>
????????? <font color="#00FF00" size="2" >
????????? <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()",100);
}
else
{
alert("載入完畢")
window.location = "http://www.csdn.net";
}
}
</script>
????????? <noscript></noscript></font></p>
????????????????? </td>
<!--//-->
</form>
</tr>
</table>
</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">
<!--
.p {? font-family: "MS Shell Dlg"; font-size: 12px}
-->
</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">
<!--
var url = 'http://www.niudun.com';
function jump(){
?location=url;
?return true;
?}
//-->
</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>
<!--
if (document.layers)
? document.write('<Layer src="' + url + ' " VISIBILITY="hide"> </Layer>');
? else
?? if (document.all || document.getElementById)
?? document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>');
else location.href = url;
//-->
</script>
</tr>
</table>
</center>
</div>
<p align="center"><font class="p"><b>網站正在裝載中，請稍候......</b></font></p>
</body>
</html>
?
網頁代碼：讓用戶等待若干秒才能點的表單按鈕，頁面讀取進度條腳本.....
我先來一個： ?
oracle_basic 讓用戶等待若干秒才能點的表單按鈕。 ?
?
<FORM ?name=sform ?action=reg_2.asp ?method=post><INPUT ?class=input ?type=submit ?value="我同意" ?name=submitbtn></FORM> ?
?
<SCRIPT ?language=javascript> ?
<!-- ?
var ?secs ?= ?15; ?
var ?wait ?= ?secs ?* ?1000; ?
document.sform.submitbtn.disabled=true; ?
? ?
for(i=1;i<=secs;i++) ?{ ?
?window.setTimeout("update(" ?+ ?i ?+ ?")", ?i ?* ?1000); ?
} ?
?
window.setTimeout("timer()", ?wait); ?
?
function ?update(num) ?{ ?
?if(num ?== ?(wait/1000)) ?{ ?
? ?document.sform.submitbtn.value ?= ?"我同意"; ?
?} ?
?else ?{ ?
? ?printnr ?= ?(wait/1000)-num; ?
? ?document.sform.submitbtn.value ?= ?"請先閱讀服務條款 ?(剩余時間" ?+ ?printnr ?+ ?")"; ?
?} ?
} ?
?
function ?timer() ?{ ?
?document.sform.submitbtn.disabled=false; ?
} ?
//--> ?
</SCRIPT> ?
--------------------------------------------------------------- ?
?
頁面讀取進度條腳本 ?
?
復制代碼到head ?
?
?
<style ?type="text/css"> ?
/* ?Container ?of ?Loader ?*/ ?
#seLoader ?
{ ?
?? ?? ?? ??width ?: ?200px; ?/* ?set ?width ?of ?loader ?*/ ?
?? ?? ?? ??z-index ?: ?1; ?
?? ?? ?? ??margin ?: ?auto; ?
} ?
?
/* ?Box ?around ?loadbar ?*/ ?
#seLoadBox ?
{ ?
?? ?? ?? ??height ?: ?12px; ?/* ?set ?height ?*/ ?
?? ?? ?? ??z-index ?: ?3; ?
?? ?? ?? ??border ?: ?1px ?solid; ?
?? ?? ?? ??padding ?: ?1px; ?
?? ?? ?? ??background-color ?: ?#efefef; ?
?? ?? ?? ??font-size ?: ?0px; ?
?? ?? ?? ??text-align ?: ?left; ?
} ?
?
/* ?loadbar ?*/ ?
#seLoadBar ?
{ ?
?? ?? ?? ??width ?: ?0%; ?
?? ?? ?? ??height ?: ?100%; ?
?? ?? ?? ??z-index ?: ?4; ?
?? ?? ?? ??background ?: ?#f90; ?
} ?
?
/* ?text ?(%) ?*/ ?
#seLoadTxt ?
{ ?
?? ?? ?? ??z-index ?: ?5; ?
?? ?? ?? ??margin-top ?: ?-14px; ?
?? ?? ?? ??font ?: ?10px ?Verdana,Geneva,sans-serif; ?
} ?
</style> ?
<script ?src="seLoader.js" ?type="text/javascript"></script> ?
<script ?type="text/javascript"> ?
load ?= ?new ?seLoader('img/') ?// ?make ?loader ?object ?and ?set ?the ?directory ?(dir ?optional) ?
load.runAtEnd('setTimeout(\'viewPage()\',10)') ?// ?run ?a ?script ?after ?loading ?(optional) ?
load.setImgs ?// ?set ?the ?images ?
( ?
?? ?? ?? ??'Image1.gif','Image2.gif','Image3.gif','Image4.gif','Image5.gif','Image6.gif','Image7.gif', ?
?? ?? ?? ??'Image8.gif','Image9.gif','Image10.gif','Image11.gif','Image12.gif','Image13.gif','Image14.gif','Image15.gif', ?
? ? ? ? ? ? ? ?'Image16.gif','Image17.gif','Image18.gif','Image19.gif' ?
) ?
?
function ?viewPage() ?
{ ?
?? ?? ?? ??location.replace('http://www.ceocio.net') ?
} ?
?
function ?initLoader() ?
{ ?
?? ?? ?? ??load.load() ?
} ?
οnlοad=initLoader ?
</script> ?
?
?
注明： ?
?
前半部分是設定進度條的顏色和規格 ?
?
?
load ?= ?new ?seLoader('img/') ?// ?make ?loader ?object ?and ?set ?the ?directory ?(dir ?optional) ?
?
這里是設定讀取圖片的位置 ?
?
?
( ?
?? ?? ?? ??'Image1.gif','Image2.gif','Image3.gif','Image4.gif','Image5.gif','Image6.gif','Image7.gif', ?
?? ?? ?? ??'Image8.gif','Image9.gif','Image10.gif','Image11.gif','Image12.gif','Image13.gif','Image14.gif','Image15.gif', ?
? ? ? ? ? ? ? ?'Image16.gif','Image17.gif','Image18.gif','Image19.gif' ?
) ?
?
這里是讀取圖片的名字 ?
?
?
?
復制代碼到body ?
?
?
<div ?align="center"> ?
<script>load.drawLoader('now ?loading...')</script> ?
</div>
總結
- 上一篇： 使用JFreeChart在网页上绘制平滑
- 下一篇： 鼠标放到控件上 DIV悬浮提示效果(四种