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

  1 function SingleProgressBar() {
  2     var iload = document.getElementById("iLoading");
  3     var ibox = document.getElementById("iBox");
  4     var nowtime = new Date(getNowFormatDate());
  5     var deadtime = new Date($("[id$=‘txtDead‘]").val());
  6     var inserttime = new Date($("[id$=‘txtInsert‘]").val());
  7     var insert_now = Number(DateDiff("s", inserttime, nowtime).toString()); //发布日期 至 现在 的秒数
  8     var insert_dead = Number(DateDiff("s", inserttime, deadtime).toString()); //发布日期 至 截止日期 的秒数
  9     var rt = Math.round(insert_now / insert_dead * 100);
 10     rt = (rt <= 100) ? rt : 100;
 11     mySetInterval(iload, ibox, rt);
 12 }
 13 
 14 
 15 function ProgressBar() { //进度条
 16     var iload, ibox, nowtime, deadtime, inserttime, insert_now, insert_dead, rt;
 17     var iloads = document.getElementsByName("iLoading");
 18     var iboxs = document.getElementsByName("iBox");
 19     //ie7用document.getElementsByName不能用
 20     if (iloads.length <= 0) {
 21         iloads = new Array();
 22         var dloads = document.getElementsByTagName("div");
 23         var j = 0;
 24         for (var i = 0; i < dloads.length; i++) {
 25             if (dloads[i].getAttribute("name") == "iLoading") {
 26                 iloads[j] = dloads[i];
 27                 j++;
 28             }
 29         }
 30     }
 31     if (iboxs.length <= 0) {
 32         iboxs = new Array();
 33         var dboxs = document.getElementsByTagName("div");
 34         var j = 0;
 35         for (var i = 0; i < dboxs.length; i++) {
 36             if (dboxs[i].getAttribute("name") == "iBox") {
 37                 iboxs[j] = dboxs[i];
 38                 j++;
 39             }
 40         }
 41     }
 42     for (var i = 0; i < iboxs.length; i++) {
 43         iload = iloads[i];
 44         ibox = iboxs[i];
 45         nowtime = new Date(getNowFormatDate()); //现在的时间 格式“2015/7/11 0:00:00”
 46         deadtime = new Date($("input[name=‘txtDead‘]").eq(i).val());
 47         inserttime = new Date($("input[name=‘txtInsert‘]").eq(i).val());
 48         insert_now = Number(DateDiff("s", inserttime, nowtime).toString()); //发布日期 至 现在 的秒数
 49         insert_dead = Number(DateDiff("s", inserttime, deadtime).toString()); //发布日期 至 截止日期 的秒数
 50         rt = Math.round(insert_now / insert_dead * 100);
 51         rt = (rt <= 100) ? rt : 100;
 52         mySetInterval(iload, ibox, rt);
 53     }
 54 }
 55 
 56 //for循环内直接使用setInterval()时，由于setInterval()执行时间有延迟
 57 //当setInterval()执行时，for循环已经运行完毕，setInterval()只执行了一次
 58 /*如下：在循环的时候直接调用mySetInterval()，传入参数，再进行for循环
 59 这样就保证了每次传入的值不会在延迟time（这里即1毫秒）后而变化*/
 60 function mySetInterval(objload, objbox, r) {
 61     var timer = setInterval(function() {
 62         var iWidth = Math.round((objload.offsetWidth + 3) / objbox.offsetWidth * 100);
 63         if (iWidth <= r) {
 64             objload.style.width = objload.offsetWidth + 1 + ‘px‘;
 65         } else {
 66             clearInterval(timer);
 67         }
 68     }, 1);
 69 }
 70 
 71 //取现在的时间 格式：2015/7/10 0:00:00
 72 function getNowFormatDate() {
 73     var date = new Date();
 74     var seperator1 = "/";
 75     var seperator2 = ":";
 76     var year = date.getFullYear();
 77     var month = date.getMonth() + 1;
 78     var strDate = date.getDate();
 79     var currentdate = year + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds();
 80     return currentdate;
 81 }
 82 
 83 //js版DateDiff()  计算时间差
 84 function DateDiff(interval, date1, date2) {
 85     var time = date2.getTime() - date1.getTime(); //相差毫秒
 86     switch (interval.toLowerCase()) {
 87         case "y": //年
 88             return parseInt(date2.getFullYear() - date1.getFullYear());
 89         case "m": //月
 90             return parseInt((date2.getFullYear() - date1.getFullYear()) * 12 + (date2.getMonth() - date1.getMonth()));
 91         case "d": //日
 92             return parseInt(time / 1000 / 60 / 60 / 24);
 93         case "w": //星期
 94             return parseInt(time / 1000 / 60 / 60 / 24 / 7);
 95         case "h": //时
 96             return parseInt(time / 1000 / 60 / 60);
 97         case "n": //分
 98             return parseInt(time / 1000 / 60);
 99         case "s": //秒
100             return parseInt(time / 1000);
101         case "l": //毫秒
102             return parseInt(time);
103     }
104 }

 1                 <div>
 2                     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
 3                         <ContentTemplate>
 4                             <asp:DataList ID="DataList1" runat="server" RepeatColumns="4" RepeatDirection="Horizontal"
 5                                 OnItemDataBound="DataList_DataBound">
 6                                 <ItemTemplate>
 7                                     <div id="tableList" runat="server" class="divBlock">
 8                                         <input name="txtInsert" type="hidden" value=‘<%#Eval("InsertTime") %>‘ />
 9                                         <input name="txtDead" type="hidden" value=‘<%#Eval("DeadLine") %>‘ />
10                                         <a href=‘<%# "ProjInfo.aspx?id="+Eval("strId")+"&index=2" %>‘ target="_blank">
11                                             <div class="divImg">
12                                                 <img alt="" class="imgSize" src=‘<%# "../ProInfo/showImg/"+Eval("FiledName") %>‘ />
13                                             </div>
14                                         </a>
15                                         <div style=" text-align:left;">
16                                             <span class=" lblTitle cssOver"><a class="cssOver" title=‘<%#Eval("ProgramsName")%>‘
17                                                 target="_blank" href=‘<%# "ProjInfo.aspx?id="+Eval("strId")+"&index=2" %>‘>
18                                                 <%#Eval("ProgramsName")%>
19                                             </a></span>
20                                             <table class="lblInfo">
21                                                 <tr>
22                                                     <th>
23                                                         活动地点：
24                                                     </th>
25                                                     <td colspan="2">
26                                                         <%#Eval("CodeName") %><%#Eval("TownName") %>
27                                                     </td>
28                                                 </tr>
29                                                 <tr>
30                                                     <th>
31                                                         活动发起：
32                                                     </th>
33                                                     <td colspan="2">
34                                                         <%#Eval("Sponsor") %>
35                                                     </td>
36                                                 </tr>
37                                                 <tr>
38                                                     <th style="width: 60px;">
39                                                         报名截止：
40                                                     </th>
41                                                     <td style="width: 100px;">
42                                                         <div name="iBox" class="iBox">
43                                                             <div name="iLoading" class="iLoading">
44                                                             </div>
45                                                         </div>
46                                                     </td>
47                                                     <td style="width: 40px;">
48                                                         <span id="spTime" runat="server">
49                                                             <%#Eval("RemainTime") %></span>
50                                                     </td>
51                                                 </tr>
52                                             </table>
53                                             <img src="../skin/default/images/basic/xin.png" style="width: 15px; margin-left: 10px;"
54                                                 alt="参与人数:" />
55                                             <span>
56                                                 <%#Eval("People") %>/<%#Eval("Population")%></span><img src="../skin/default/images/basic/erji.png"
57                                                     alt="浏览次数" style="width: 15px; margin-left: 10px;" /><span><%#Eval("Population")%></span></div>
58                                     </div>
59                                 </ItemTemplate>
60                             </asp:DataList>
61                             <div id="dEmpty" runat="server" visible="false" style="clear: both; text-align: center;
62                                 height: 30px; line-height: 30px;">
63                                 暂无数据
64                             </div>
65                             <table cellpadding="0" cellspacing="0" align="center" width="100%" class="border">
66                                 <tr>
67                                     <td align="center" colspan="2">
68                                         <webdiyer:AspNetPager ID="pager" runat="server" CssClass="paginator" CurrentPageButtonClass="cpb"
69                                             FirstLastButtonsClass="flb" AlwaysShow="true" PrevNextButtonsClass="pnb" 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　OnPageChanged="pager_PageChanged"
70                                             PageSize="16" FirstPageText="首页" LastPageText="末页" NextPageText=">" PrevPageText="<">
71                                         </webdiyer:AspNetPager>
72                                     </td>
73                                 </tr>
74                             </table>
75                             <input id="btnSearch" runat="server" type="submit" onserverclick="btnSearch_OnClick"
76                                 style="display: none;" />
77                         </ContentTemplate>
78                     </asp:UpdatePanel>
79                 </div>