JS实现批量生成时显示滚动进度条和百分数
Author：飘易 Source：
Categories： PostTime： 20:50:41
&&&&在后台进行批量生成静态HTML时，您可能有这样的需求，需要实时显示整个过程的进度和滚动进度条。您当然可以利用ASP、PHP、Aspx等动态脚本语言实现这样的需求，但是这么做是有缺陷的，在循环生成的过程中，CPU将会一直被占用，而且可能同时产生大量的数据请求。&&&&比如这样的批量ASP生成脚本：&%for&id=&min&to&maxresponse.write&"&iframe&border=0&vspace=0&hspace=0&marginwidth=0&marginheight=0&framespacing=0&frameborder=0&scrolling=no&width=99%&height=20&src='crhtml.asp?id="&id&"'&&/iframe&"next%&&&&&上面的脚本缺点是：同时请求了大量的页面，很容易造成本地客户端或服务器的通信阻塞，可能发生连接请求被拒绝的情况。&&&&下面飘易设计一种利用js+ajax的方式实现无刷新的批量生成并显示进度条和百分数的方式。飘易以实例说明，本项目共有2个文件：1.html和1.asp(模拟动态生成页面)。&&&&&在批量生成的过程中，我们不能简单用循环的方式比如&for&、while来实现。因为javascript是单线程，如果使用了循环，那么在生成的过程中，就不会逐条地实时显示进度，而是等全部生成html后，才会一次性显示。这样，就背离了我们的设计初衷。&&&&&关键是利用js的&setInterval&定时器函数。670)this.width=670" src="../upimg/file/02/326.jpg" border=0 alt="JS实现批量生成时显示滚动进度条和百分数" />&&&&&1.html源码如下：&html&&head&&meta&http-equiv="Content-Type"&content="text/&charset=gb2312"&&title&后台&test&/title&&style&type="text/css"&body{font-size:12font-family:"Verdana","宋体","Arial";&color:#222;text-decoration:margin:8}#process1{width:500height:20border:1px&solidōbackground-color:#CCCCCC;&}#process2{width:1height:20text-align:background-color:#33FF00;&}&/style&&/head&&body&&div&id="process1"&&div&id="process2"&&/div&&/div&&div&id='show'&&/div&&script&type="text/javascript"&//创建XMLHttpRequestvar&try{xmlhttp&=&new&XMLHttpRequest();}catch(e){try{xmlhttp&=&new&ActiveXObject("Microsoft.XMLHTTP");}catch(e){&& &try{&xmlhttp&=&new&ActiveXObject("Msxml2.XMLHTTP");}catch(e){xmlhttp&=&alert("您的浏览器不支持XMLHTTP，无法完成此操作！");}}}//利用AJAX的无刷新调用function&subhtml(id){xmlhttp.open("GET",&"1.asp?id="+id+"&rnd="+Math.random(),&false);&&xmlhttp.setRequestHeader("Content-Type",&"text/&charset=gb2312");&xmlhttp.send(null);var&strText="";if(xmlhttp.status==200){strText&=&xmlhttp.responseT&}return&strT}//设置最小id和最大idvar&idmin=2;var&idmax=11;var&isrun=var&myi=//定时器var&intervalId&=setInterval(showfun,500);function&showfun(){if(isrun)&return&isrun=var&res=subhtml(myi);var&para=document.createElement("div");para.innerHTML&=&document.getElementById("show").appendChild(para);document.getElementById('process2').innerText=(100*(myi-idmin+1)/(idmax-idmin+1)).toFixed(2)+"%";document.getElementById('process2').style.width=500*((myi-idmin+1)/(idmax-idmin+1))+"px";myi++;if(myi&idmax)&window.clearInterval(intervalId);isrun=}&/script&&/body&&/html&&&&&1.asp源码如下：&%Function&Sleep(n)&'单位秒sDim&StartTimeStartTime&=&TimerDo&:&Loop&Until&Timer&n+StartTimeEnd&FunctionSleep(2)&'延时2秒response.write&request("id")&"_ok"%&&&&&注意：1.asp只是飘易模拟生成html的一个延时页面。
版权所有。转载时必须以链接形式注明作者和及本声明。
上一篇：下一篇：
0条评论 “JS实现批量生成时显示滚动进度条和百分数”
No Comment .
名称(*必填)
邮件(选填)
网站(选填)
记住我,下次回复时不用重新输入个人信息
Www.Piaoyi.Org 原创文章版权由所有php 代码实现的进度条-php教程-PHP中文网QQ群微信公众号还没有收藏php 代码实现的进度条进度条即计算机在处理任务时，实时的，以图片形式显示处理任务的速度，完成度，剩余未完成任务量的大小，和可能需要处理时间，一般以长方形条状显示。本篇文章主要介绍使用PHP代码实现进度条效果的代码&html&
&table width=&400& border=&0& cellspacing=&1& cellpadding=&1&&
&td bgcolor=&000000&&
&table width=&400& border=&0& cellspacing=&0& cellpadding=&1&&
&td bgcolor=&ffffff&&
&img src=&bar.gif& src=&bar.gif& width=&0& height=&16& id=&percent_img& name=&percent_img& align=&absmiddle&&
&span id=&percent_txt& name=&percent_txt&&0%&/span&
for($i=0;$i&=100;$i++) //循环输出100次JavaScript代码
$width = $i * 4;
echo &&SCRIPT&&;
echo &percent_img.width=$&; //控制图片宽度
echo &percent_txt.innerHTML='$i%';&; //控制百分比显示
echo &&/SCRIPT&&;
for($j=0;$j&1000000;$j++)
//为了演示进度条的效果，这里执行了一个空循环
?&以上就是php 代码实现的进度条的详细内容，更多请关注php中文网其它相关文章！共3篇141点赞收藏分享：.php.cn&猜你喜欢php任务进度条工具库
github地址
注：针对循环时间长的任务，对处理进程的进度展示。
进度条已经引入三种类型进度条，可依次展示多个循环任务首页上一页下一页尾页PHP中文网：独家原创，永久免费的在线，php技术学习阵地！
All Rights Reserved | 皖B2-QQ群:关注微信公众号php+ajax实现带进度条的大数据排队导出思路以及源码_AJAX相关
作者：用户
本文讲的是php+ajax实现带进度条的大数据排队导出思路以及源码_AJAX相关，
废话不多说，先上效果图：
点击导出，实现
统计完成之后
下面来谈谈实现的思路：
前面导出操作简单，从第二个导出操作开始：
点击&确定&调用exportCsv函数
复制代码 代码如下:
废话不多说，先上效果图：
点击导出，实现
统计完成之后
下面来谈谈实现的思路：
前面导出操作简单，从第二个导出操作开始：
点击"确定"调用exportCsv函数
复制代码 代码如下:
&a class="on" href="javascript:exportCsv();"&&em&导出&/em&&/a&
exportCvs函数如下function exportCsv(){
　//清除等待的转动圈
$('#loading').('');
//弹出统计总数对话框，函数在后面给出定义
//ajax请求总数
$.post("&?php echo WEB_URL;?&/index.php?q=onlinesea/getwherecount"+search_uri, function(json){
var return_arr = eval('(' + json + ')');
var num = return_arr['total'];
var processnum = return_arr['processnum'];
if(num == 0){
poptip.title('系统消息');
poptip.content('查询结果为空，不能进行数据导出');
poptip.close();
for (var i in return_arr['cntarr']){
if (return_arr['cntarr'][i] != 0){
count_arr[i] = return_arr['cntarr'][i];
for (var i in count_arr){
type_arr[ii]=i;
　　//当数据不为空的时候弹出是否到处框
exportCsvConfirm(num, processnum);
//弹出确认下载
exportCsvConfirm函数
function exportCsvConfirm(num, processnum){
var msg = '需要导出的数据有 &span style="color: red"&' + num + '&/span& 行，可能会占用您较多时间来进行导出。&br /&您还需要继续吗？';
// 提示是否继续
$.dialog.confirm(msg, function () {
$('#loading').html('');
processed_count = 0;
index = 1;
win.$('#process_bg').hide().width('0%').show();
win.$('#process_num').html('0');
$.dialog.through({
title: '数据导出进度',
content: win.document.getElementById('processbar'),
lock: true,
opacity: '.1'
function(){
window.location.reload();
//当继续的时候
win.$('#progress_info').show().text('正在导出数据，请耐心等待，请勿关闭窗口...');
//开始执行导出操作
excel_export2(num, processnum);
关键函数excel_export2队列请求，首先会在前面定义全局变量
复制代码 代码如下:
var search_uri = "&?php echo $?&";var event = "&?php echo $?&";var processed_count = 0;
// 已处理的数据条数var index = 1;var iii
= 0;var ajaxmark = 1;var win = $.dialog.
// 顶层页面window对象var count_arr = new Array(&?php echo count($this-&tables);?&);var type_arr = new Array();
我们要定义全局变量
和iii ，ajaxmark
,index主要用于对一个表数据太多的时候进行分批导出 ，iii用来控制队列循环，ajaxmark用来判断前一个请求是否执行成功了，成功的话在执行下面的请求
复制代码 代码如下:
function excel_export2(num, processnum){
//获取tabletype
tabletype=type_arr[iii];
//获取总数
num = count_arr[tabletype];
//判断是否数组是否执行完毕
if(typeof(tabletype)=='undefined'&&typeof(num)=='undefined'){
//判断是否有上一个ajax请求是否完成
if(ajaxmark==1){
index = 1;
//将ajax请求标记为未执行完成
　　　　ajaxmark=2;
//执行ajax请求，函数在后面给出
retrun_var = excel_export_ajax(index, num, processnum, tabletype);
//判断函数返回
if(typeof(retrun_var)=='undefined'){
　　　　　　//将iii自增，执行下一个数组数据
　　　　　　//递归调用自己
excel_export2(num, processnum);
if(iii&100){
　　　　//当ajax返回成功的时候，返回。
}else if(retrun_var=='success'){
//setTimeout(excel_export2(num, processnum),3000);
//setInterval(_excel_export2(num, processnum),3000);
　　　　//每隔3秒检查是否ajax请求结束，这里settimeout 不能传递参数，只能通过_excel_export2这种形式
setTimeout(_excel_export2(num, processnum),3000);
function _excel_export2(num, processnum){
return function(){
excel_export2(num, processnum);
//excel_export_ajax函数
执行导出/* AJAX，递归调用 */function excel_export_ajax(index, num, processnum, tabletype){
url: "&?php echo WEB_URL;?&/index.php?q=onlinesea/exportcsv"+search_uri+"/index/"+index+ "/total/" + num + '/tabletype/' + tabletype,
type: 'GET',
success: function(data)
　　　　//执行次数自增
++processed_
　　　　//当一个表数据太多，分批导出
// 更新进度条　　　　//判断进度
var process_num = parseInt((processed_count / processnum) * 100);　　　　
if (process_num &= 100)
process_num = 100;
　　　　//跟新进度条
update_process(process_num);
//alert(processed_count+'--'+processnum);
　　　　//当执行结束
if (processed_count &= processnum)
　　　　　　//压缩文件
backup_compress();
return 'success';
if (data == '0'){
　　　　　　//将ajax请求标记为执行完毕，执行下一个url请求
ajaxmark=1;
当一个表的数据未导出完成的时候，会循环调用自己去请求， php函数或判断是否到处完成，导出完成返回0
，未完成返回1
excel_export_ajax(index, num, processnum, tabletype);
/* 备份文件执行压缩 */function backup_compress(){
win.$('#progress_info').text('正在生成压缩文件...');
url: "&?php echo WEB_URL;?&/index.php?q=onlinesea/compress/event/&?php echo $?&",
success: function(msg){
win.$('#process_bg').show().width('100%');
win.$('#process_num').html('100');
win.$('#progress_info').html('导出数据完成。
&a href="' + msg + '" style="color: #006699; text-decoration: underline"&下载文件&/a&');
/* 更新进度条 */function update_process(process_num){
win.$('#process_bg').show().width(process_num + '%');
win.$('#process_num').html(process_num);}
下面附上源码，咳咳相关php程序大家自己脑补下吧
复制代码 代码如下:
&script type="text/javascript" language="javascript"&var search_uri = "&?php echo $?&";var event = "&?php echo $?&";var processed_count = 0;
// 已处理的数据条数var index = 1;var iii
= 0;var ajaxmark = 1;var win = $.dialog.
// 顶层页面window对象var count_arr = new Array(&?php echo count($this-&tables);?&);var type_arr = new Array();function exportCsv(){
$('#loading').html('');
$.post("&?php echo WEB_URL;?&/index.php?q=onlinesea/getwherecount"+search_uri, function(json){
var return_arr = eval('(' + json + ')');
var num = return_arr['total'];
var processnum = return_arr['processnum'];
if(num == 0){
poptip.title('系统消息');
poptip.content('查询结果为空，不能进行数据导出');
poptip.close();
for (var i in return_arr['cntarr']){
if (return_arr['cntarr'][i] != 0){
count_arr[i] = return_arr['cntarr'][i];
for (var i in count_arr){
type_arr[ii]=i;
exportCsvConfirm(num, processnum);
function exportCsvConfirm(num, processnum){
var msg = '需要导出的数据有 &span style="color: red"&' + num + '&/span& 行，可能会占用您较多时间来进行导出。&br /&您还需要继续吗？';
$.dialog.confirm(msg, function () {
$('#loading').html('');
processed_count = 0;
index = 1;
win.$('#process_bg').hide().width('0%').show();
win.$('#process_num').html('0');
$.dialog.through({
title: '数据导出进度',
content: win.document.getElementById('processbar'),
lock: true,
opacity: '.1'
function(){
window.location.reload();
win.$('#progress_info').show().text('正在导出数据，请耐心等待，请勿关闭窗口...');
excel_export2(num, processnum);
function excel_export2(num, processnum){
tabletype=type_arr[iii];
num = count_arr[tabletype];
if(typeof(tabletype)=='undefined'&&typeof(num)=='undefined'){
if(ajaxmark==1){
index = 1;
ajaxmark=2;
retrun_var = excel_export_ajax(index, num, processnum, tabletype);
if(typeof(retrun_var)=='undefined'){
excel_export2(num, processnum);
if(iii&100){
}else if(retrun_var=='success'){
//setTimeout(excel_export2(num, processnum),3000);
//setInterval(_excel_export2(num, processnum),3000);
setTimeout(_excel_export2(num, processnum),3000);
}}function _excel_export2(num, processnum){
return function(){
excel_export2(num, processnum);
}}/* 执行导出 */function excel_export(num, processnum){
var retrun_var = 'ss';
for (var i in count_arr){
num = count_arr[i];
tabletype =
index = 1;
retrun_var = excel_export_ajax(index, num, processnum, tabletype);
if(typeof(retrun_var)=='undefined'){
//alert('xxxx');
setTimeout(function(){},5000);
if (retrun_var == 'success')
/* AJAX，递归调用 */function excel_export_ajax(index, num, processnum, tabletype){
url: "&?php echo WEB_URL;?&/index.php?q=onlinesea/exportcsv"+search_uri+"/index/"+index+ "/total/" + num + '/tabletype/' + tabletype,
type: 'GET',
success: function(data)
++processed_
// 更新进度条
var process_num = parseInt((processed_count / processnum) * 100);
if (process_num &= 100)
process_num = 100;
update_process(process_num);
//alert(processed_count+'--'+processnum);
if (processed_count &= processnum)
backup_compress();
return 'success';
if (data == '0'){
ajaxmark=1;
excel_export_ajax(index, num, processnum, tabletype);
/* 更新进度条 */function update_process(process_num){
win.$('#process_bg').show().width(process_num + '%');
win.$('#process_num').html(process_num);}
/* 备份文件执行压缩 */function backup_compress(){
win.$('#progress_info').text('正在生成压缩文件...');
url: "&?php echo WEB_URL;?&/index.php?q=onlinesea/compress/event/&?php echo $?&",
success: function(msg){
win.$('#process_bg').show().width('100%');
win.$('#process_num').html('100');
win.$('#progress_info').html('导出数据完成。
&a href="' + msg + '" style="color: #006699; text-decoration: underline"&下载文件&/a&');
});}function tip(){
poptip = $.dialog.through({
id: 'tip',
title: '系统消息',
content: '正在统计总数，请勿关闭窗口
&img src="http://images.cnblogs.com/loading_s.gif" /&',
width: 300,
height: 100,
icon: 'system',
lock: true,
opacity: .1
function(){
window.location.reload();
poptip.show();}
function packetDelete(url,msg){
$.dialog.confirm(msg, function () {
$.post(url, function(data){
if(data == '1'){
$.dialog('删除成功', function(){window.location.reload();});
else if(data == '2'){
$.dialog('删除失败', function(){window.location.reload();});
else if(data == '3'){
$.dialog('文件不存在，或者已删除', function(){window.location.reload();});
});}&/script&
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索ajax
ajaxfileupload进度条、ajax进度条、ajax文件上传进度条、jquery ajax 进度条、ajax 加载实时进度条，以便于您获取更多的相关知识。
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
开发者常用软件，超百款实用软件一站式提供
云栖社区(yq.aliyun.com)为您免费提供相关信息，包括
，所有相关内容均不代表云栖社区的意见！友情提示：垃圾评论一律封号，下载出错或者资源有问题请联系全栈客服QQ
php进度条大数据分页生成HTML，减轻服务器压力(原创)
所需积分：200
亲，积分不够，多去发布资源
或联系QQ人工充值
亲，vip会员下载原创作品 积分5 折，其余免积分下载
PS:尊重原创作者劳动成果，感谢分享！
充值方式： 或联系QQ人工充值