简单的进度条<HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE>Custom Progress Bar</TITLE><SCRIPT LANGUAGE=javascript> var value = 0; var delaySecond = 0;
function progressBarState(val) { window.progressBar.width = val; window.tipString.value = valueString; }
function run() { if (value > 200) { valueString = "页面加载完毕"; window.tipString.value = valueString; return; }
to lovettforever(编程浪子): 这个方法在简单的单独的页面是行的，没有问题！可是我的是一个页面上有两个Frame，用户点击第一个Frame中的按钮作为事件触发第二个Frame的页面改变。这样的话，用url可能不行的。
to Patrick_DK(疾风摩郎): 你的进度条很漂亮，也很好用。 可是我就是出现了你所说的问题了，我想让这个进度条显示，还要同时加载页面，然后等页面显示好后再隐藏这个进度条。好像不用多线程是无法实现的。可是……多线程？真头痛呀！不好意思的说，我是接这个项目的时候才开始接触java的，好多东西我都是空白！ 各位，再帮帮忙吧，看这个东西到底如何搞定！
to lovettforever(编程浪子): 谢谢你。 我在Frontpage运行了你的代码，预览，一下就出现了CSDN的网页，其他的效果什么也没有看到。不知道是不是我的网太快了，所以看不到效果。
不用Frontpage,直接打开A.html就可以了
to lovettforever(编程浪子): 还是不行，运行不起来。不过我看懂了你的代码，就是在click事件中加载D页面，先延迟一段时间然后再显示CSDN网页。对不对？ 可是我的要求是，加载大的页面的同时，显示那个“正在加载的信息……”信息。也就是说，那个信息是作为一种友好界面让用户看的，其实真正的工作是加载用户所要的大量的数据。加载提示信息的显示和数据的后台加载两者应该是同步的，不能有先后的次序。唉，看来非用多线程不可了。
ｔｏ 楼主：你去找个JavaScript高手来看看吧
ｔｏ 楼主：你去找个JavaScript高手来看看吧
to masterjames(james):是呀，具体说说吧。to eyeieye(魔之眼): 什么东西酷呀？没有发现。拜托，我这边可是巴巴的希望早点解决这个问题，早点给大家的分呢。
这下叫好了吧！ <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <SCRIPT LANGUAGE=javascript> var value = 0; var delaySecond = 0;
function progressBarState(val) { window.progressBar.width = val; window.tipString.value = valueString; }
function run() { if (value > 200) { valueString = "页面加载完毕"; window.tipString.value = valueString; MM_showHideLayers('Layer1','','hide'); return; }
用frame和window.showModalDialog()来实现.showModalDialog()方法有返回值,可以将最后生成的pdf文件作为返回值传递给原窗体.假设你的frame由top.jsp和result.jsp(name="result")组成.var rtnValue = showModalDialog("Getting.jsp",null,"status:no"); //suggested "file " is a field of the result.jsp parent.all("result").file = rtnValue.pdf;其中Getting.jsp是个frame. <HTML style="width:223px;height:90px;"> <HEAD> <title></title> </HEAD> <frameset rows="100%,0%" border=0> <frame src=progress.htm ></frame> <frame src=GetPdf.jsp></frame> </frameset> </HTML>progress.htm只显示一个gif图片--进度条GetPdf.jsp生成pdf文件.生成pdf后 <script language="javascript"> var obj = new Object(); //"pdfFile" is the pdf file obj.pdf = <%=pdfFile%>;window.parent.returnValue=obj; </script>
进度条如何写呢？我想如果进度条能写的话，可以试一试的。
<head>
<title>测试</title>
<meta http-equiv="refresh" content="1 ;url=http://www.csdn.net">
</head>
<body style="cursor:wait">
<font color="green">系统正在处理,请等待......</font>
</body>
</html>
___________________________________________
1是秒随你调
从别的页面到这个页面，然后延迟n秒到url
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>Custom Progress Bar</TITLE><SCRIPT LANGUAGE=javascript>
var value = 0;
var delaySecond = 0;
function progressBarState(val)
{
window.progressBar.width = val;
window.tipString.value = valueString;
}
function run()
{
if (value > 200)
{
valueString = "页面加载完毕";
window.tipString.value = valueString;
return;
}
progressBarState(value);
value += 2;
valueString = "页面加载中... " + value/2 + "%";
window.setTimeout("run()",50);
}
function delay()
{
valueString = "页面准备加载，请稍候...";
window.tipString.value = valueString;
window.progressBar.width = 0;
window.setTimeout("run()",1000);
}
</SCRIPT>
</HEAD>
<BODY onLoad="delay()"><P><INPUT id=progressBar
style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 9px; BACKGROUND-COLOR: dodgerblue; BORDER-BOTTOM-STYLE: none"
readOnly name=progressBar maxLength=0></P>
<P><INPUT id=tipString
style="COLOR: red; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none;
BORDER-BOTTOM-STYLE: none" readOnly maxLength=20 name=tipString></P></BODY>
</HTML>
你的进度条很漂亮，也很好用。 可是我就是出现了你所说的问题了，我想让这个进度条显示，还要同时加载页面，然后等页面显示好后再隐藏这个进度条。好像不用多线程是无法实现的。可是……多线程？真头痛呀！不好意思的说，我是接这个项目的时候才开始接触java的，好多东西我都是空白！ 各位，再帮帮忙吧，看这个东西到底如何搞定！
是这个意思吗？
A.html:
<html>
<head>
<title>test</title>
</head>
<frameset cols="117,*">
<frame name="B" src="B.html" >
<frame name="C" src="C.html" >
</frameset>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</html>B.html:
<html>
<body>
<input type="button" value="click me" onclick= "parent.C.location.href='D.html'">
</body>
</html>C.html:D.html:
<html>
<head>
<title>测试</title>
<meta http-equiv="refresh" content="1 ;url=http://www.csdn.net">
</head>
<body style="cursor:wait">
<font color="green">系统正在处理,请等待......</font>
</body>
</html>
什么东西酷呀？没有发现。拜托，我这边可是巴巴的希望早点解决这个问题，早点给大家的分呢。
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT LANGUAGE=javascript>
var value = 0;
var delaySecond = 0;
function progressBarState(val)
{
window.progressBar.width = val;
window.tipString.value = valueString;
}
function run()
{
if (value > 200)
{
valueString = "页面加载完毕";
window.tipString.value = valueString;
MM_showHideLayers('Layer1','','hide');
return;
}
progressBarState(value);
value += 2;
valueString = "页面加载中... " + value/2 + "%";
window.setTimeout("run()",50);
}
function delay()
{
valueString = "页面准备加载，请稍候...";
window.tipString.value = valueString;
window.progressBar.width = 0;
window.setTimeout("run()",1000);
}
</SCRIPT>
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}function MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS) { //v3.0
//Copyright 1998 Macromedia, Inc. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,NS=(navigator.appName=='Netscape'), curLeft, curTop;
if (!document.all && !document.layers) return false;
retVal = true; if(!NS && event) event.returnValue = true;
if (MM_dragLayer.arguments.length > 1) {
curDrag = MM_findObj(objName); if (!curDrag) return false;
if (!document.allLayers) { document.allLayers = new Array();
with (document) if (NS) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
for (i=0; i<allLayers.length; i++) if (allLayers[i].document && allLayers[i].document.layers)
with (allLayers[i].document) for (j=0; j<layers.length; j++) allLayers[allLayers.length]=layers[j];
} else for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position) allLayers[allLayers.length]=all[i];}
curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
curDrag.MM_oldZ = (NS)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS)?curDrag.left:curDrag.style.pixelLeft; curDrag.MM_startL = curLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop; curDrag.MM_startT = curTop;
curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop -cU;
curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop +cD;
curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
} else {
var theEvent = ((NS)?objName.type:event.type);
if (theEvent == 'mousedown') {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
var maxDragZ=null; document.MM_maxZ = 0;
for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
var aLayerZ = (NS)?aLayer.zIndex:aLayer.style.zIndex;
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (((NS)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (!NS) { parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement; } }
var tmpX=mouseX-(((NS)?pageX:style.pixelLeft+parentL)+MM_hLeft);
var tmpY=mouseY-(((NS)?pageY:style.pixelTop +parentT)+MM_hTop);
var tmpW = MM_hWidth; if (tmpW <= 0) tmpW += ((NS)?clip.width :offsetWidth);
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS)?clip.height:offsetHeight);
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
|| maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
if (curDrag) {
document.onmousemove = MM_dragLayer; if (NS) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS)?curDrag.left:curDrag.style.pixelLeft;
curTop = (NS)?curDrag.top:curDrag.style.pixelTop;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag; curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {<!--下面还有-->
eval('curDrag.'+((NS)?'':'style.')+'zIndex=document.MM_maxZ+1');
if (!curDrag.MM_dropBack) document.MM_maxZ++; }
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mousemove') {
if (document.MM_curDrag) with (document.MM_curDrag) {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
newLeft = mouseX-MM_oldX; newTop = mouseY-MM_oldY;
if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
if (MM_bT!=null) newTop = Math.max(newTop ,MM_bT);
if (MM_bB!=null) newTop = Math.min(newTop ,MM_bB);
MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
if (NS) {left = newLeft; top = newTop;}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (MM_dragJS) eval(MM_dragJS);
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mouseup') {
document.onmousemove = null;
if (NS) document.releaseEvents(Event.MOUSEMOVE);
if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
if (document.MM_curDrag) with (document.MM_curDrag) {
if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
(Math.pow(MM_targL-((NS)?left:style.pixelLeft),2)+
Math.pow(MM_targT-((NS)?top:style.pixelTop),2))<=MM_tol) {
if (NS) {left = MM_targL; top = MM_targT;}
else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT; }
if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
if(MM_dropBack) {if (NS) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
retVal = false; if(!NS) event.returnValue = false; }
document.MM_curDrag = null;
}
if (NS) document.routeEvent(objName);
} return retVal;
}function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head><body bgcolor="#FFFFFF" text="#000000" onLoad="delay();MM_showHideLayers('Layer1','','show')">
<div id="Layer1" style="position:absolute; left:7px; top:3px; width:764px; height:446px; z-index:1; background-color: #99CCCC; layer-background-color: #99CCCC; border: 1px none #000000; visibility: hidden" onKeyUp="MM_dragLayer('Layer1','',0,0,0,0,true,false,-1,-1,-1,-1,false,false,0,'',false,'')">
<P>
<INPUT id=progressBar
style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; HEIGHT: 9px; BACKGROUND-COLOR: dodgerblue; BORDER-BOTTOM-STYLE: none"
readOnly name=progressBar maxLength=0>
</P>
<P>
<INPUT id=tipString
style="COLOR: red; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: #99CCCC;
BORDER-BOTTOM-STYLE: none" readOnly maxLength=20 name=tipString>
</P>
</div>
<h1>怎样，够cool的吧？可别忘了给我加分噢！</h1>
</body>
</html>
接上去就可以了！
//suggested "file " is a field of the result.jsp
parent.all("result").file = rtnValue.pdf;其中Getting.jsp是个frame.
<HTML style="width:223px;height:90px;">
<HEAD>
<title></title>
</HEAD>
<frameset rows="100%,0%" border=0>
<frame src=progress.htm ></frame>
<frame src=GetPdf.jsp></frame>
</frameset>
</HTML>progress.htm只显示一个gif图片--进度条GetPdf.jsp生成pdf文件.生成pdf后
<script language="javascript">
var obj = new Object();
//"pdfFile" is the pdf file
obj.pdf = <%=pdfFile%>;window.parent.returnValue=obj;
</script>