求ASP下进度条源码！多谢了！

Comer 2003-09-16 07:35:38

开发ASP+XML软件时，有远传数据任务，等待时间较长，又没有提示，老板要求做一进度条显示等待过程！
哪位大虾做过呀，多谢了！

我的信箱comerliang@163.com

...全文

75 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

ghost_lsw 2003-10-09

打赏
举报

1。引用
<script language="javascript" src="ShowProcessBar.js"></script>
2。在提交Button或<A>或<span> 加扩展属性
IsShowProcessBar="True"

文件ShowProcessBar.js如下

AddProcessbar();
var bwidth=0;
var swidth = document.all.waiting.clientWidth;

function CheckIsProcessBar(obj)
{
if (obj.IsShowProcessBar=="True")
{
return false;
}
else
{
return true;
}
}

function CheckClick(e)
{
if (e == 1)
{
if (bwidth<swidth*0.98){
bwidth += (swidth - bwidth) * 0.025;
if (document.all)document.sbar.width = bwidth;
else document.rating.clip.width = bwidth;
setTimeout('CheckClick(1);',150);

}
}
else
{
if(document.all)
{
if(document.all.waiting.style.visibility == 'visible')
{document.all.waiting.style.visibility = 'hidden';
bwidth = 1;}
whichIt = event.srcElement;

while (CheckIsProcessBar(whichIt))
{
whichIt = whichIt.parentElement;
if (whichIt == null)return true;
}

document.all.waiting.style.pixelTop = (document.body.offsetHeight - document.all.waiting.clientHeight) / 2 + document.body.scrollTop;
document.all.waiting.style.pixelLeft = (document.body.offsetWidth - document.all.waiting.clientWidth) / 2 + document.body.scrollLeft;
document.all.waiting.style.visibility = 'visible';
if(!bwidth)CheckClick(1);
bwidth = 1;

}

else
{

if(document.waiting.visibility == 'show')
{document.waiting.visibility = 'hide';
document.rating.visibility = 'hide';
bwidth = 1;}
if(e.target.href.toString() != '')
{
document.waiting.top = (window.innerHeight - document.waiting.clip.height) / 2 + self.pageYOffset;
document.waiting.left = (window.innerWidth - document.waiting.clip.width) / 2 + self.pageXOffset;
document.waiting.visibility = 'show';
document.rating.top = (window.innerHeight - document.waiting.clip.height) / 2 + self.pageYOffset+document.waiting.clip.height-10;
document.rating.left = (window.innerWidth - document.waiting.clip.width) / 2 + self.pageXOffset;
document.rating.visibility = 'show';
if(!bwidth)CheckClick(1);
bwidth = 1;
}
}
return true;
}
}

function AddProcessbar()
{

var Str=""
Str+= "<div id=waiting style=position:absolute;top:50px;left:100px;z-index:1;visibility:hidden >";
Str+= "<layer name=waiting visibility=visible zIndex=2 >"
Str+= "<table border=2 cellspacing=1 cellpadding=0 bordercolorlight=#FFFFFF bordercolordark=#C0C0C0 bgcolor=#E0E0E0>"
Str+= " <tr>"
Str+= " <td bgcolor=#E0E0E0 height=30px width=300px align=center>"
Str+= " <font color=black>系統正在處理中...</font>"
Str+= " </td>"
Str+= " </tr>"
Str+= " <tr>"
Str+= " <td bgcolor=#E0E0E0>"
Str+= " <img width=1 height=10 name=sbar style=background-color:#6699cc>"
Str+= " </td>"
Str+= " </tr>"
Str+= "</table> "
Str+= "</layer>"
Str+= "</div>"
document.write(Str)

if(document.all)document.onclick = CheckClick;
}

测试文件TestShowBar.HTML

<HTML>
<HEAD>
<script language="javascript" src="ShowProcessBar.js"></script>
</HEAD>
<BODY>
<A href="error.asp" IsShowProcessBar="True">A Href</a>
<BR>
<BR>
<span onclick="location.href='error.asp'" style="cursor:hand" IsShowProcessBar="True"><font color=blue>Span</font></span>
<BR>
<form action="error.asp">
<input type=Submit value="Submit">
<input type=button value="normal button" IsShowProcessBar="True">
</form>
<P IsShowProcessBar="True">AAAAAAAAAAAAA</P>
</BODY>
</HTML>

icech 2003-09-17

打赏
举报

用过软件的朋友都知道，进度条是一个优秀软件的重要组成部分。
它的存在能够使用户及时掌握程序的运行进度，确认应用程序正常工作。可是ASP中似乎没有上述标准控件，控制起来也比较麻烦。
那幺如何实现进度条呢？
以下是本人的一些观点(仅供参考)
我们通常在用ASP处理程序(指的是写文件或操作数据库)的时候，会专门用一个页面(*.asp)去处理或控制这些程序，当处理完毕的时候再跳转到显示页面。这时我们就可以通过这些处理页面显示进度条。其方法是根据程序处理的进度依次画一百张同样的图形(如有颜色的矩形)，从而形成进度条。其效果与用其它编程工具所实现的基本相似
以下是一些Source，希望能够给各位有个启发。
response.buffer=true
dim lostnum
dim shownum
delayshow(dstep,dmax)过程是用于显示多少img(画多少进度)
其中dmax为表示整个程序需要处理多少(dmax)步才能完成整个处理程序.
其中dstep表示当前处理的步骤占整个处理过程中的分量，用数量表示。
变量lostnum的存在是由于dmax过大(比如10000)，而dstep过小(比如1)造成的。如果调用delayshow(1,10000)势必不可能画一次img,事实上
delayshow(100,10000)才画一次，表示完成1%，因为100占10000的1%.
sub delayshow(dstep,dmax)
dim total file://显示画面100张img
dim dtemp file://过渡变量
total=100
dtemp=dstep
dstep=dstep+lostnum
if (dstep*total)/dmax《1 then
file://判断当要处理的东西连1%都没有时，不画img同时用变量lostnum存放未画的处理总数，便于下次调用本过程时在处理。
lostnum=lostnum+dtemp
else
for ccc=1 to fix((dstep*total)/dmax) file://取整数
Response.Write ""
next
Response.Flush file://将缓存里的东西(图片)显示出来
file://变量shownum用于存放目前已经画的img
shownum=shownum+fix((dstep*total)/dmax)
lostnum=0
end if
end sub
file://由于算法的问题，主要是取余造成不能完全画100次，这时就需要
过程showlost()将余下未画的img,通通显示处理，实现进度条的等长
sub showlost()
for ccc=1 to (100-shownum)
Response.Write ("")
next
Response.Write "
"
Response.Flush
end sub

最后请注意
这里需要用到缓存技术
response.buffer=true;
response.flush;
response.end
这些请参考MSDN帮助

chenxiaoqiang 2003-09-17

打赏
举报

有个很好的解决方案，先显示一个gif动画，内容是一个进度条；等你的数据下载完毕了，再隐藏动画，显示你的数据。呵呵！很经典吧！我公司老用这招。不用多少代码家能实现，优点很多啊！！！

TCMY 2003-09-17

打赏
举报

up我倒是有代码，可是不好找，给分我可能找得到呵

7758iloveu 2003-09-17

打赏
举报

楼上的不会就算了,不要..........

进度条文件

ShowProcessBar.js
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

AddProcessbar();
var bwidth=0;
var swidth = document.all.waiting.clientWidth;

function CheckIsProcessBar(obj)
{
if (obj.IsShowProcessBar=="True")
{
return false;
}
else
{
return true;
}
}

function CheckClick(e)
{
if (e == 1)
{
if (bwidth<swidth*0.98){
bwidth += (swidth - bwidth) * 0.025;
if (document.all)document.sbar.width = bwidth;
else document.rating.clip.width = bwidth;
setTimeout('CheckClick(1);',1000);

}
}
else
{
if(document.all)
{
if(document.all.waiting.style.visibility == 'visible')
{document.all.waiting.style.visibility = 'hidden';
bwidth = 1;}
whichIt = event.srcElement;

while (CheckIsProcessBar(whichIt))
{
whichIt = whichIt.parentElement;
if (whichIt == null)return true;
}

document.all.waiting.style.pixelTop = (document.body.offsetHeight - document.all.waiting.clientHeight) / 2 + document.body.scrollTop;
document.all.waiting.style.pixelLeft = (document.body.offsetWidth - document.all.waiting.clientWidth) / 2 + document.body.scrollLeft;
document.all.waiting.style.visibility = 'visible';
if(!bwidth)CheckClick(1);
bwidth = 1;

}

else
{

if(document.waiting.visibility == 'show')
{document.waiting.visibility = 'hide';
document.rating.visibility = 'hide';
bwidth = 1;}
if(e.target.href.toString() != '')
{
document.waiting.top = (window.innerHeight - document.waiting.clip.height) / 2 + self.pageYOffset;
document.waiting.left = (window.innerWidth - document.waiting.clip.width) / 2 + self.pageXOffset;
document.waiting.visibility = 'show';
document.rating.top = (window.innerHeight - document.waiting.clip.height) / 2 + self.pageYOffset+document.waiting.clip.height-10;
document.rating.left = (window.innerWidth - document.waiting.clip.width) / 2 + self.pageXOffset;
document.rating.visibility = 'show';
if(!bwidth)CheckClick(1);
bwidth = 1;
}
}
return true;
}
}

function AddProcessbar()
{

var Str=""
Str+= "<div id=waiting style=position:absolute;top:50px;left:100px;z-index:1;visibility:hidden >";
Str+= "<layer name=waiting visibility=visible zIndex=2 >"
Str+= "<table border=2 cellspacing=1 cellpadding=0 bordercolorlight=#FFFFFF bordercolordark=#C0C0C0 bgcolor=#E0E0E0>"
Str+= " <tr>"
Str+= " <td bgcolor=#E0E0E0 height=30px width=300px align=center>"
Str+= " <font color=black>数据正在处理中...</font>"
Str+= " </td>"
Str+= " </tr>"
Str+= " <tr>"
Str+= " <td bgcolor=#E0E0E0>"
Str+= " <img width=1 height=10 name=sbar style=background-color:#6699cc>"
Str+= " </td>"
Str+= " </tr>"
Str+= "</table> "
Str+= "</layer>"
Str+= "</div>"
document.write(Str)

if(document.all)document.onclick = CheckClick;
}

调用页面:

upload.asp

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

<script language="javascript" src="ShowProcessBar.js"></script>

<html><head><title>upload_file_form</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<LINK href="oa.css" rel=stylesheet>
</head>

等你的分了,我可是花了大力气呀:)

ghost_lsw 2003-09-17

打赏
举报

用flash做快

bananasmiling 2003-09-17

打赏
举报

bananasmiling 2003-09-17

打赏
举报

bananasmiling 2003-09-17

打赏
举报

<html>
<script language=JavaScript>
var load_line_i=1;
var load_line_n=500;
function load_n(txt)
{load_line_i+=400/load_line_n;
window.status="请等待..已完成"+Math.floor(load_line_i/4.00)+"%";
load_txt.innerText=txt+" "+Math.floor(load_line_i/4.00)+"%";
document.all("line").width=load_line_i;}
function finish(){
if(confirm("已经下载完成..关闭对话框吗?"))document.all("load").style.display='none';}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>loading</title>
<style type="text/css">

</style>
</head>

<body onload=finish()>
<div id=load>请稍候..
<div class=px1><img id=line src="px.gif" style="background:red" height=10></div>
<div id=load_txt>dd</div>
</div>
<!-因为这是个测试页,所以加了很多,效果更好一些-->
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>

<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>

<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>

<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>

<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>

<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>

<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>

<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>
<script>load_n("已完成:");</script>