如何在嵌套中继器中使用JavaScript定时器？

Question

我想添加一个JavaScript计时器的产品，如果该项目有促销，然后显示计时器，并开始倒计时..所以我在做的是即时通讯发送结束日期从代码后面的JavaScript函数该函数根据结束日期创建计时器。我一直在尝试很长时间的脚本工作，问题是我无法循环内嵌入中继器以获得正确的倒计时控制ID和索引。 希望你们能帮助我解决这个问题。 感谢

HTML代码：

 <asp:Repeater runat="server" ID="Repeater1" OnItemDataBound="rptdep_ItemDataBound" OnItemCommand="rptdep_Details_Command"> 
     <ItemTemplate> 
      <asp:LinkButton class="navbar-brand" runat="server" ID="LinkButton1" Style="text-decoration: none; margin-right: -25px; border: none; font-size: medium" CommandArgument='<%#Eval("department_code") %>' CommandName="more"> 
       <asp:Repeater runat="server" ID="rptdeppromo" OnItemDataBound="rptdeppromo_ItemDataBound" OnItemCommand="Item_depPromo_Command"> 
        <ItemTemplate> 
         <div runat="server" id="countdown" class="cntdwn"></div> 
        </ItemTemplate> 
       </asp:Repeater> 
     </ItemTemplate> 
    </asp:Repeater> 

定时器JS代码：

function producttimer(compntname, enddate1, col) { 
     $(document).ready(function() { 

      var $countdown = $('#rptdep_rptdeppromo_' + compntname + '_countdown_' + col); 


       // set the date we're counting down to 
       var target_date = new Date(enddate1); 
       // variables for time units 
       var days, hours, minutes, seconds; 

       // update the tag with id "countdown" every 1 second 
       setInterval(function() { 
        target_date.getTime(); 

        // find the amount of "seconds" between now and target 
        var current_date = new Date().getTime(); 

        // check for match 
        if (current_date === target_date) { 
        } 

        var seconds_left = (target_date - current_date)/1000; 

        // do some time calculations 
        days = parseInt(seconds_left/86400); 
        seconds_left = seconds_left % 86400; 

        hours = parseInt(seconds_left/3600); 
        seconds_left = seconds_left % 3600; 

        minutes = parseInt(seconds_left/60); 
        seconds = parseInt(seconds_left % 60); 

        // format countdown string + set tag value 
        $countdown.text(days + "days, " + hours + "hrs, " + minutes + "min, " + seconds + "s"); 
       }, 1000); 
     }); //EOF DOCUMENT.READY 
    } 

C＃父中继器代码：

protected void rptdep_ItemDataBound(object sender, RepeaterItemEventArgs e) 
{ 

    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 
    { 
     Repeater innerRepeater2 = (Repeater)e.Item.FindControl("rptdeppromo"); 
     DataRowView drv = (DataRowView)(e.Item.DataItem); 

     } 
    } 
} 

C＃嵌套中继器代码：

protected void rptdeppromo_ItemDataBound(object sender, RepeaterItemEventArgs e) 
{ 
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 
    { 
     DataRowView drv = (DataRowView)(e.Item.DataItem); 

DateTime EndDate = Convert.ToDateTime(Convert.ToDateTime(drv.Row["publishtdt"]).ToString("dd MMM yyyy")); 


     int countw = 0; 
     int count = 0; 

     if (total < 30) 
     { 
      count += 1; 
      foreach (RepeaterItem item in rptdep.Items) 
      { 
       countw += 1; 
      } 
      ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "counter" + countw, "producttimer('" + countw + "','" + EndDate + "', '" + e.Item.ItemIndex + "');", true); 
     } 
     else 
     { 

     } 
    } 
} 

Answer 1

这里是一个不同的方法：

在你的中继1，显示在标签的所有促销活动结束日期，并给予他们相同的类“cntdwn”

2 - 你的JS，当页面准备它的外观与同一类和循环里他们在你的页面的所有项目：

 var elements = document.getElementsByClassName("cntdwn"); 
     for (var i = 0, len = elements.length; i < len; i++) 
     { 
     var PromoID = elements[i].Id; 
     Var EndDate = document.getElementById(PromoID).textContent; 
     } 

3-现在你有LABLE ID和结束日期，使用你的倒计时逻辑在文本显示倒计时该ID的区域。

祝你好运...

Answer 2

upvoted答案为我工作，但我需要调整一下。我认为一些代码可能会帮助看起来在这里的下一个人。使用 插件jquery.countup.js（任何反应工作）：

<div id="div<%# ((RepeaterItem)Container).ItemIndex + 1%>" class="countdown"> 
    <%# Eval("EntryDate") %> 
</div> 


<script type="text/javascript"> 
    $(function() { 
     var elements = document.getElementsByClassName('countdown'); 
     var len = elements.length; 
     for (var i = 0; i < len; ++i) { 
      var timerID = elements[i].id; 
      var startDate = elements[i].innerText; 
      startCounter(startDate, timerID); 
     }; 
    }); 

    function startCounter(entryDate, timerID) { 
     var entDate = new Date(entryDate); 
     var year = (entDate).getFullYear(); 
     var month = (entDate).getMonth() + 1; 
     var day = (entDate).getDate(); 
     var hour = (entDate).getHours(); 
     var min = (entDate).getMinutes(); 
     var sec = (entDate).getSeconds(); 

     $("#" + timerID).empty(); 
     $("#" + timerID).countup({ 
      start: new Date(year, month, day, hour, min, sec) //year, month, day, hour, min, sec 
     }); 
    };