鱼有所思,鱼有所悟
做个不错的人,微笑面对人生
PHP博客
首页
新随笔
联系
聚合
管理
随笔-103 评论-37 文章-0 trackbacks-0
PHP+JavaScript 实现动态显示服务器端运行进度条(转)
我有一个 PHP 程序,需要循环调用 XMLRPC 500 次左右,运行 20 多分钟。当程序运行的时候,客户端只有一片空白的页面,浏览器的状态一直是 load。作为用户来说,这种等待是漫长的,埋怨也就多了。
解决思路
如果有个进度条呈现在用户面前,告诉用户服务器端正在干嘛,当前运行了多少,问题就可以得到基本解决,虽然没有减少服务器端的运行时间,但用户的心里会有微妙的变化,感觉不再是枯燥无味的等待,至少等待还有个盼头 :) 。
考虑到每一次调用 XMLRPC 比较耗时,所以可以在每一次调用时使用 PHP 的 flush() 函数输出一段 JavaScript 对客户端浏览器中进度条显示进行动态更新。
<?
php
if ('source' == $_GET['act']) //查看源代码
{
show_source($_SERVER["SCRIPT_FILENAME"]);
exit;
}
set_time_limit(0);
for ($i = 0; $i < 500; $i++)
{
$users[] = 'Tom_' . $i;
}
$width = 500; //显示的进度条长度,单位 px
$total = count($users); //总共需要操作的记录数
$pix = $width / $total; //每条记录的操作所占的进度条单位长度
$progress = 0; //当前进度条长度
?>
<
html
>
<
head
>
<
title
>
动态显示服务器运行程序的进度条
</
title
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
/>
<
meta
name
="Generator"
content
="JEdit"
>
<
meta
name
="Author"
content
="Krazy Nio"
>
<
style
>
body, div input
{
}
{
font-family
:
Tahoma
;
font-size
:
9pt
}
</
style
>
<
script
language
="JavaScript"
>
<!--
function
updateProgress(sMsg, iWidth)
{
document.getElementById(
"
status
"
).innerHTML
=
sMsg;
document.getElementById(
"
progress
"
).style.width
=
iWidth
+
"
px
"
;
document.getElementById(
"
percent
"
).innerHTML
=
parseInt(iWidth
/
<?
php echo $width;
?>
*
100
)
+
"
%
"
;
}
//
-->
</
script
>
</
head
>
<
body
>
<
div
style
="margin: 4px; padding: 8px; border: 1px solid gray; background: #EAEAEA; width: <?php echo $width+8; ?>px"
>
<
div
><
font
color
="gray"
>
如下进度条的动态效果由服务器端 PHP 程序结合客户端 JavaScript 程序生成。
</
font
></
div
>
<
div
style
="padding: 0; background-color: white; border: 1px solid navy; width: <?php echo $width; ?>px"
>
<
div
id
="progress"
style
="padding: 0; background-color: #FFCC66; border: 0; width: 0px; text-align: center; height: 16px"
></
div
>
</
div
>
<
div
id
="status"
>
</
div
>
<
div
id
="percent"
style
="position: relative; top: -30px; text-align: center; font-weight: bold; font-size: 8pt"
>
0%
</
div
>
</
div
>
<?
php
flush(); //将输出发送给客户端浏览器
foreach ($users as $user)//在此处使用空循环模拟较为耗时的操作,实际应用中需将其替换;若你的操作不耗时,我想你就没必要使用这个脚本了)
{
for ($i = 0; $i < 10000; $i++) {
;;
}
?>
<
script
language
="JavaScript"
>
updateProgress(
"
正在操作用户“<?php echo $user; ?>”
.
"
,
<?
php echo min($width, intval($progress));
?>
);
</
script
>
<?
php
flush(); //将输出发送给客户端浏览器,使其可以立即执行服务器端输出的 JavaScript 程序。
$progress += $pix;
} //end foreach
// 最后将进度条设置成最大值 $width,同时显示操作完成
?>
<
script
language
="JavaScript"
>
updateProgress(
"
操作完成!
"
,
<?
php echo $width;
?>
);
</
script
>
<?
php
flush();
?>
<
input
type
="button"
value
="查看源码"
onclick
="document.location.href='<?php echo $_SERVER['PHP_SELF']; ?>?act=source'"
/>
</
body
>
</
html
>
posted on 2008-05-15 16:34
鱼有所思
阅读(2697)
评论(2)
编辑
收藏
引用
网摘
所属分类:
AJAX
评论:
#
re: PHP+JavaScript 实现动态显示服务器端运行进度条(转) 2008-05-15 16:41 |
鱼有所思
实现真正的 Loading 进度条显示加载进度效果,带百分比!
网上好像没见过(可能是我没运气)能用进度条真正体现网页加载进度的效果
<
body
onLoad
="loadDiv.style.display='none';"
style
="margin:0px;"
>
<
style
type
="text/css"
>
#loadDiv
{
}
{
position
:
absolute
;
z-index
:
999
;
width
:
expression(document.body.clientWidth)
;
height
:
expression(document.body.clientHeight)
;
background-color
:
#FFFFFF
;
text-align
:
center
;
padding-top
:
200px
;
}
</
style
>
<
div
id
="loadDiv"
><
img
src
="http://www.51ajax.com/images/rss/loading.gif"
>
Loading
</
div
>
<
iframe
src
="http://bbs.51js.com"
></
iframe
>
</
body
>
回复
更多评论
#
改进版的渐变效果进度条
2008-06-12 15:36 |
鱼有所思
改进版的渐变效果进度条
对原来的版本的渐变效果进度条做了改进,抛弃了长度达256的数组,并修改了样式表,实现了大幅度减少资源消耗。
请看效果
。
<
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
onload
="go();"
>
<
div
id
="bg"
><
div
id
="ps"
></
div
><
span
id
="bn"
>
0%
</
span
></
div
>
</
body
>
</
html
>
回复
更多评论
刷新评论列表
只有注册用户
登录
后才能发表评论。
网站导航:
IT新闻
博客园
BlogJava
博客生活
IT博客网
C++博客
程序员招聘
<
2008年5月
>
日
一
二
三
四
五
六
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
7
留言簿
(79)
给我留言
查看公开留言
查看私人留言
随笔分类
AJAX(30)
css
Document(2)
HTML(15)
java(2)
jsp(2)
LINUX(4)
MySQL(20)
PHP(34)
随笔档案
2015年4月 (1)
2014年12月 (1)
2014年11月 (1)
2014年9月 (1)
2014年8月 (1)
2014年7月 (2)
2014年4月 (1)
2014年1月 (1)
2013年8月 (2)
2013年7月 (1)
2013年4月 (3)
2013年3月 (2)
2012年5月 (1)
2012年4月 (1)
2012年2月 (2)
2012年1月 (1)
2011年11月 (2)
2011年8月 (1)
2011年5月 (2)
2010年6月 (1)
2010年4月 (2)
2010年3月 (1)
2010年2月 (1)
2009年12月 (1)
2009年11月 (5)
2009年10月 (2)
2009年9月 (2)
2009年8月 (1)
2009年3月 (2)
2009年2月 (1)
2009年1月 (1)
2008年12月 (1)
2008年11月 (8)
2008年10月 (2)
2008年9月 (5)
2008年8月 (2)
2008年7月 (3)
2008年6月 (2)
2008年5月 (2)
2008年4月 (4)
2008年2月 (1)
2008年1月 (1)
2007年11月 (2)
2007年10月 (1)
2007年7月 (2)
2007年5月 (5)
2007年4月 (5)
2007年3月 (10)
相册
鱼有所思
php
【孟子E章】
fengyun的个人空间 mysql优化
isno relax world的PHP技术博客
http://www.isnono.com/index.php?mode=1&page=1
阿赖的个性空间
寒松的博客
http://expectforever.bokee.com/index.html
好东西
今晚好梦博客-很多好收藏
流水孟春
易中求
php linux
搜索
最新评论
1. re: 需求分析文档都包括哪些内容
评论内容较长,点击标题查看
--鱼有所思
2. re: js获取本机ip地址、mac地址、机器名
评论内容较长,点击标题查看
--鱼有所思
3. re: Eclipse跑通第一个已有的jsp项目
突然想起来一件事,有一次用Eclipse写php代码,结果用浏览器浏览的时候,汉字全为乱码,当时知道是编码的问题,但是最后也没弄好......
--卢中阳
4. re: 如何学习JSP
评论内容较长,点击标题查看
--鱼有所思
5. re: 表格隔行变色,鼠标放上变不同颜色。兼容IE,FF firefox
评论内容较长,点击标题查看
--鱼有所思
阅读排行榜
1. js中innerHTML与innerText的用法与区别(109300)
2. Keycode对照表(54676)
3. JS转义 escape()、encodeURI()、encodeURIComponent()区别详解(35301)
4. Js字符串操作函数大全(26852)
5. mysql insert的几点操作(DELAYED 、IGNORE、ON DUPLICATE KEY UPDATE )(21257)