JavaScript进度条（datalist/repeater等多个进度条）

function SingleProgressBar() {
var iload = document.getElementById("iLoading");
var ibox = document.getElementById("iBox");
var nowtime = new Date(getNowFormatDate());
var deadtime = new Date($("[id$='txtDead']").val());
var inserttime = new Date($("[id$='txtInsert']").val());
var insert_now = Number(DateDiff("s", inserttime, nowtime).toString()); //发布日期 至 现在 的秒数
var insert_dead = Number(DateDiff("s", inserttime, deadtime).toString()); //发布日期 至 截止日期 的秒数
var rt = Math.round(insert_now / insert_dead * 100);
rt = (rt <= 100) ? rt : 100;
mySetInterval(iload, ibox, rt);
}

function ProgressBar() { //进度条
var iload, ibox, nowtime, deadtime, inserttime, insert_now, insert_dead, rt;
var iloads = document.getElementsByName("iLoading");
var iboxs = document.getElementsByName("iBox");
//ie7用document.getElementsByName不能用
if (iloads.length <= 0) {
iloads = new Array();
var dloads = document.getElementsByTagName("div");
var j = 0;
for (var i = 0; i < dloads.length; i++) {
if (dloads[i].getAttribute("name") == "iLoading") {
iloads[j] = dloads[i];
j++;
}
}
}
if (iboxs.length <= 0) {
iboxs = new Array();
var dboxs = document.getElementsByTagName("div");
var j = 0;
for (var i = 0; i < dboxs.length; i++) {
if (dboxs[i].getAttribute("name") == "iBox") {
iboxs[j] = dboxs[i];
j++;
}
}
}
for (var i = 0; i < iboxs.length; i++) {
iload = iloads[i];
ibox = iboxs[i];
nowtime = new Date(getNowFormatDate()); //现在的时间 格式“2015/7/11 0:00:00”
deadtime = new Date($("input[name='txtDead']").eq(i).val());
inserttime = new Date($("input[name='txtInsert']").eq(i).val());
insert_now = Number(DateDiff("s", inserttime, nowtime).toString()); //发布日期 至 现在 的秒数
insert_dead = Number(DateDiff("s", inserttime, deadtime).toString()); //发布日期 至 截止日期 的秒数
rt = Math.round(insert_now / insert_dead * 100);
rt = (rt <= 100) ? rt : 100;
mySetInterval(iload, ibox, rt);
}
}

//for循环内直接使用setInterval()时，由于setInterval()执行时间有延迟
//当setInterval()执行时，for循环已经运行完毕，setInterval()只执行了一次
/*如下：在循环的时候直接调用mySetInterval()，传入参数，再进行for循环
这样就保证了每次传入的值不会在延迟time（这里即1毫秒）后而变化*/
function mySetInterval(objload, objbox, r) {
var timer = setInterval(function() {
var iWidth = Math.round((objload.offsetWidth + 3) / objbox.offsetWidth * 100);
if (iWidth <= r) {
objload.style.width = objload.offsetWidth + 1 + 'px';
} else {
clearInterval(timer);
}
}, 1);
}

//取现在的时间 格式：2015/7/10 0:00:00
function getNowFormatDate() {
var date = new Date();
var seperator1 = "/";
var seperator2 = ":";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
var currentdate = year + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds();
return currentdate;
}

//js版DateDiff()  计算时间差
function DateDiff(interval, date1, date2) {
var time = date2.getTime() - date1.getTime(); //相差毫秒
switch (interval.toLowerCase()) {
case "y": //年
return parseInt(date2.getFullYear() - date1.getFullYear());
case "m": //月
return parseInt((date2.getFullYear() - date1.getFullYear()) * 12 + (date2.getMonth() - date1.getMonth()));
case "d": //日
return parseInt(time / 1000 / 60 / 60 / 24);
case "w": //星期
return parseInt(time / 1000 / 60 / 60 / 24 / 7);
case "h": //时
return parseInt(time / 1000 / 60 / 60);
case "n": //分
return parseInt(time / 1000 / 60);
case "s": //秒
return parseInt(time / 1000);
case "l": //毫秒
return parseInt(time);
}
}

<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DataList ID="DataList1" runat="server" RepeatColumns="4" RepeatDirection="Horizontal"
OnItemDataBound="DataList_DataBound">
<ItemTemplate>
<div id="tableList" runat="server" class="divBlock">
<input name="txtInsert" type="hidden" value='<%#Eval("InsertTime") %>'
/>
<input name="txtDead" type="hidden" value='<%#Eval("DeadLine") %>' />
<a href='<%# "ProjInfo.aspx?id="+Eval("strId")+"&index=2" %>' target="_blank">
<div class="divImg">
<img alt="" class="imgSize" src='<%# "../ProInfo/showImg/"+Eval("FiledName") %>'
/>
</div>
</a>
<div style=" text-align:left;">
<span class=" lblTitle cssOver">
<a class="cssOver" title='<%#Eval("ProgramsName")%>' target="_blank" href='<%# "ProjInfo.aspx?id="+Eval("strId")+"&index=2" %>'>
<%#Eval( "ProgramsName")%>
</a>
</span>
<table class="lblInfo">
<tr>
<th>
活动地点：
</th>
<td colspan="2">
<%#Eval( "CodeName") %>
<%#Eval( "TownName") %>
</td>
</tr>
<tr>
<th>
活动发起：
</th>
<td colspan="2">
<%#Eval( "Sponsor") %>
</td>
</tr>
<tr>
<th style="width: 60px;">
报名截止：
</th>
<td style="width: 100px;">
<div name="iBox" class="iBox">
<div name="iLoading" class="iLoading">
</div>
</div>
</td>
<td style="width: 40px;">
<span id="spTime" runat="server">
<%#Eval( "RemainTime") %>
</span>
</td>
</tr>
</table>
<img src="../skin/default/images/basic/xin.png" style="width: 15px; margin-left: 10px;"
alt="参与人数:" />
<span>
<%#Eval( "People") %>
/
<%#Eval( "Population")%>
</span>
<img src="../skin/default/images/basic/erji.png" alt="浏览次数" style="width: 15px; margin-left: 10px;"
/>
<span>
<%#Eval( "Population")%>
</span>
</div>
</div>
</ItemTemplate>
</asp:DataList>
<div id="dEmpty" runat="server" visible="false" style="clear: both; text-align: center;
height: 30px; line-height: 30px;">
暂无数据
</div>
<table cellpadding="0" cellspacing="0" align="center" width="100%" class="border">
<tr>
<td align="center" colspan="2">
<webdiyer:AspNetPager ID="pager" runat="server" CssClass="paginator" CurrentPageButtonClass="cpb"
FirstLastButtonsClass="flb" AlwaysShow="true" PrevNextButtonsClass="pnb"
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　OnPageChanged="pager_PageChanged" PageSize="16"
FirstPageText="首页" LastPageText="末页" NextPageText=">" PrevPageText="<">
</webdiyer:AspNetPager>
</td>
</tr>
</table>
<input id="btnSearch" runat="server" type="submit" onserverclick="btnSearch_OnClick"
style="display: none;" />
</ContentTemplate>
</asp:UpdatePanel>
</div>