JS代码：
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>
其实当初进度条只要设个宽就行了，不需要增长效果，刚入门不知道怎么实现
时间： 2024-10-03 22:40:32