关键词：
【中文标题】使用jquery一一显示进度条【英文标题】：Display progress bar one by one using jquery 【发布时间】：2012-06-28 06:14:18 【问题描述】：我有一个带有进度条的图像列表。我想一张一张地显示进度条。
这意味着我有 5 个图像和 5 个进度条。当我点击上传按钮时，我想显示第一个进度条并在完成功能后执行相应的功能隐藏第一个进度条。完成后显示第二个进度条第二个图像的功能隐藏第二个进度条然后第三个等等。
我已经为此使用了 setTimeout()，但效果不佳。
这是我的html代码：
<?php
$sql = "SELECT * FROM `tblupload` WHERE `indeletestatus` = 0";
$result = mysql_query($sql);
$ids = "";
if($result)
while($row = mysql_fetch_object($result))
if($ids == "")
$ids = $row->intid;
else
$ids = $ids.",".$row->intid;
?>
<div id="list<?php echo $row->intid;?>" class="list_item">
<input type="hidden" name="img<?php echo $row->intid;?>" id="img<?php echo $row->intid;?>" value="<?php echo $row->vchname;?>" />
<?php //echo $i;?>
<div id="load_img" class="list_item_img_div">
<!-- <img src="images/pouring-water.jpg" class="list_img_img" />-->
<img src="upload/thumb/<?php echo $row->vchname;?>" class="list_img_img" onClick="return main_img(<?php echo $row->intid;?>)" />
</div>
<div id="imgname" class="imgname">
<?php echo $row->vchname;?>
</div>
<div id="imgprogress<?php echo $row->intid;?>" class="imgprogress">
<img src="images/progress.gif" />
</div>
<div id="imgtrash<?php echo $row->intid;?>" class="imgtrash">
<img src="images/trash.png" onClick="return delete_img(<?php echo $row->intid;?>);" />
</div>
</div>
<?php
?>
<input type="hidden" name="ids" id="ids" value="<?php echo $ids;?>" />
这是我的 javascript 代码：
Array.prototype.count = function ()
return this.length;
$(document).ready(function()
$("#upload").click(function()
var ids = $("#ids").val();
var arr = ids.split(",");
var count = arr.count();
for(i=0;i<count;i++)
idval = arr[i];
$("#imgprogress"+idval).css("display","block");
setTimeout("load_progress(idval)",2000);
);
);
function load_progress(id)
$("#imgprogress"+id).css("display","none");
问题是所有进度条同时显示，一段时间后唯一的第五个进度条隐藏了。
但是我想显示第一个进度条一段时间，然后第一个进度条就消失了 在第二个进度条显示之后，一段时间后第二个将被隐藏和儿子。 我怎样才能做到这一点？ 有谁能解答吗？
【问题讨论】：
【参考方案1】：它显示所有进度条并只隐藏最后一个的原因是因为for循环 不会在 setTimeout() 处停止。循环执行到最后，使所有进度条可见。
你应该尝试以下几行：
$("#upload").click(function()
var ids = $("#ids").val();
var arr = ids.split(",");
var count = arr.count();
$("#imgprogress"+arr[0]).css("display","block");
setTimeout("load_progress(arr,0,count)",2000);
);
function load_progress(arr,i,count)
$("#imgprogress"+arr[i]).css("display","none");
if (i == count) return false;
$("#imgprogress"+arr[i]).css("display","block");
setTimeout("load_progress(arr,++i,count)",2000);
【讨论】：
id 来自数据库，现在它包含 100,105,108,109,110,111，现在计数为 6。这两个值可能会有所不同。所以这在这种情况下不起作用 @galtech.Mariya 我更改了代码以使其适用于您的 id 类型。基于jquery插件uploadify实现实时显示进度条上传图片
...简单易用的多文件上传方案。作为一个Jquery插件，Uploadify使用简单，并具有高度的定制性。Uplo 查看详情
获取 ASP.NET GridView 单元格值并在 JQuery 进度条中显示
...ver数据库填充的ASP.NETGridView。这工作正常。我后面的代码使用的是C#。GridView中的一列包含一个JQuery进度条，另一列包含许多响应。请 查看详情
显示正在复制的数据的进度条
...copied【发布时间】：2013-08-2614:42:18【问题描述】：我正在使用淘汰赛、Jquery和WCF服务。我使用ajax加载数据。假设这是我的ajax调用代码functionDataLoad()$.ajax(url:"../Service/EmpData",type:"PUT",contentType:\'application 查看详情
jquery上传文件显示进度条(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="../js/jquery.js"></script></head><body><h2>HTML5异步上传文件，带进度条(jQuery)</h2><formm 查看详情
网站顶部显示预加载进度条preload.js
...p;支持性主流浏览器都支持，ie浏览器需要9以上9也支持。使用方法<scriptsrc="http://code.jquery.com/jquery-1.7.1.min.js"></script><scriptsrc="js/preload.js"></script><scriptty 查看详情
使用 jQuery 的文件上传进度条
】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情
使用 jQuery 的文件上传进度条
】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情
jQuery进度条加载直到页面重定向
...临时页面，这个页面上有一个隐藏的附属链接，在1秒后使用jQuery单击该链接。我想显示jQuery加载栏进度，直到页面重定向到附属链接。我该怎么做？【问题讨论】：你有没有写代 查看详情
使用引导进度条以模态显示上传进度
】使用引导进度条以模态显示上传进度【英文标题】：DisplayUploadProgressinModalwithBootstrapProgressBar【发布时间】：2015-04-2003:01:02【问题描述】：我正在构建一个c#MVC应用程序，它显示一个表单并允许用户上传一些文件。当用户点击提... 查看详情
使用 jquery ui 进度条上传文件
】使用jqueryui进度条上传文件【英文标题】：fileuploadwithjqueryuiprogressbar【发布时间】：2011-01-2015:13:55【问题描述】：我正在使用jCrop，我想为图片上传添加一个进度条，如何让jqueryui进度条加载图片字节？【问题讨论】：我相信这... 查看详情
java多文件上传显示进度条
...进度。手上有类似代码的朋友联系我，扣-15080818，跪求！使用 apachefileupload ,springMVC jquery1.6x,bootstrap 实现一个带进度条的多文件上传，由于fileupload的局限，暂不能实现每个上传文件都显示进度条，只能实现一个总的进度... 查看详情
使用jquery给网站添加下载进度显示(代码片段)
因为知微网站的流出带宽特别低，为了给用户更好的体验，在线打开pdf的时候，考虑采用两条途径：一条是按页提供给用户进行阅读，减少带宽占用，因为不是所有的用户都全部页面都看一遍；另一条是给出pdf的下载进度提示，... 查看详情
Delphi：如何使用进度条显示 CreateProcess 的进度？
】Delphi：如何使用进度条显示CreateProcess的进度？【英文标题】：Delphi:HowtouseaprogressbartodisplaytheprogressofaCreateProcess?【发布时间】：2014-08-0818:24:23【问题描述】：我有一个Startandwait函数，它创建一个进程并等待结束。如何创建进度... 查看详情
如何使用 swift 显示带有进度条的 AVAudioPlayer？
】如何使用swift显示带有进度条的AVAudioPlayer？【英文标题】：HowtoAVAudioPlayerwithprogressbarshowusingswift?【发布时间】：2019-01-2413:26:17【问题描述】：我正在使用AVAudioPlayer播放歌曲。我需要一个进度条来显示歌曲的进度。我的问题是... 查看详情
如何使用 savefiledialog 在进度条上显示进度？
】如何使用savefiledialog在进度条上显示进度？【英文标题】：Howtodisplayprogressonaprogressbarusingsavefiledialog?【发布时间】：2017-07-2418:03:38【问题描述】：我想在Windows窗体中使用“SaveFileDialog”和“ProgressBar”显示保存文件的进度。保... 查看详情
显示下载进度条
...】：2021-10-2604:24:50【问题描述】：在我的应用程序中，我使用执行器服务从url下载文件。现在我想添加一个水平进度条来显示下载进度。但我面临错误。如何在不使用异步任务的情况下在此代码中添加进度条？privateclassExecutorServ... 查看详情
动画 jQuery 进度条
...ttp://www.cssflow.com/snippets/animated-progress-bar/demo但是进度条不使用jquery并且教程没有告诉您如何将多个按钮链接到进度条。所以搜索后我找到了这个教程：http://www.jcode. 查看详情
使用 WCF Duplex 回调更新 JQuery 进度条？
】使用WCFDuplex回调更新JQuery进度条？【英文标题】：UpdateaJQueryprogressbarusingWCFDuplexcallbacks?【发布时间】：2012-06-1721:01:43【问题描述】：我在IIS(.NET4.x)上托管了一个相当简单的WCF双工服务一个特定的服务方法运行时间很长（1-3分钟... 查看详情