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

JS代码：

 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>

其实当初进度条只要设个宽就行了，不需要增长效果，刚入门不知道怎么实现