一个伪进度条的实现过程:
1.操作效果:按下开始搜索按钮,总进度条开始向前移动,搜索结束进度条走完;
2.说明:移动是通过设置Interval定时器定时执行一个修改进度条<span>标签css width属性的百分比实现的,
之所以说是伪进度条是因为,设置了一个width的百分比常量,为90%,如果进度条还没走到90%的长度Ajax就有返回值,即搜索结束时,
就将进度条的width设置为100%;而如果进度条已经走到90%的长度了,但ajax还没有返回值的情况即还没有执行成功,就让进度条停止在90%的长度,直到
Ajax执行成功并有返回值的情况才立即设置width为100%;
3.代码:
(1).js部分
<script type="text/javascript">
<!--
//初始化判断页面是否存在没有清除掉的interval
if(typeof(interval)!="undefined")
{
doClearInterval();
}
else
{
interval = null;
}
//进度条id
var totalProgress_node_id = "totalProgress";
//进度条进度
var totalProgress = 0;
function beginProgress()
{
totalProgress = 1;
interval = setInterval("doProgress()",300);//1000为1秒钟
}
//设置进度
function setProgress(node_id,progress)
{
if (node_id)
{
$("#" + node_id + " > span").css("width",String(progress) + "%");
//$("#" + node_id + "Text").html(String(progress) + "%");
}
}
//进行循环获取进度阶段
function doProgress()
{
setProgress(totalProgress_node_id,totalProgress);
totalProgress++;
if(totalProgress == 90)
{
doClearInterval();
}
}
//清除延时器
function doClearInterval()
{
clearInterval(interval);
}
//-->
</script>
(2).html部分
<!-- 20141120 leo -->
<div style="height:55px;overflow: hidden;" id="totalProgressDiv">
<div>
<button onclick="searchDev()" class="button-form" style="background: url("public/images/btn_bg.jpg") repeat scroll 0pt 0pt transparent;">开始搜索</button>
</div>
<div style="height: 15px;line-height: 15px; float:left;margin-right:5px;margin-top:6px;"><span id="totalProgressTitle">总进度条</span></div>
<div id="totalProgress" class="progressBar" style="width:300px; float:left;margin-top:6px;">
<span> </span>
</div>
</div>
<!-- 20141120 leo -->
(3).ajax部分
function searchDev()// 开始搜索设备
{
//先清除Interval
doClearInterval();
beginProgress();
$.ajax({
url: "eleDeviceAction!searchDev.action?nowTime="+nowTime,
type: "POST",
dataType:"json",
async: true,
success:function(retData)
{
//先清除Interval
doClearInterval();
setProgress(totalProgress_node_id,99);
..............
});
}