如何在嵌套中繼器中使用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 
     }); 
    };