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>

 

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