數據列表中缺少數據複製

Question

我想顯示產品的倒計時時間，但倒數計時器並未顯示在所有行中。僅顯示第一行。

我想顯示數據列表中的所有記錄的計數時間，我該怎麼辦？

  <div id="timelabel"></div> 
      <script type="text/javascript"> 

      var leave = <%=seconds%> ; 


      CounterTimer(); 
      var interv=setInterval(CounterTimer,1000); 


      function CounterTimer() 
      { 
       var day = Math.floor(leave/(60 * 60 * 24)) 
       var hour = Math.floor(leave/3600) - (day * 24) 
       var minute = Math.floor(leave/60) - (day * 24 *60) - (hour * 60) 
       var second = Math.floor(leave) - (day * 24 *60*60) - (hour * 60 * 60) - (minute*60) 


       hour=hour<10 ? "0" + hour : hour; 
       minute=minute<10 ? "0" + minute : minute; 
       second=second<10 ? "0" + second : second; 


       var remain=day + " days "+hour + ":"+minute+":"+second; 
       leave=leave-1; 


       document.getElementById("timelabel").innerHTML=remain; 


      } 

      </script> 
      <br /><br /> 
      product_Id: 
      <asp:Label ID="product_IdLabel" runat="server" Text='<%# Eval("product_Id") %>' /> 
      <br /> 
      product_name: 
      <asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' />  

      </ItemTemplate> 

Answer 1

當你混合服務器端代碼和客戶端代碼，您沒有考慮到在客戶端元素的ID應該是唯一的。因此getElementById只返回找到的第一個元素（注意它不叫getElement s ById）。

爲了更方便的JavaScript，你應該包括/使用jQuery，所以在你的頁面中添加對它的引用。

更改HTML的timelabel到：

<div class="timelabel" data-leave="<%=seconds%>"></div> 

我懷疑你運行一箇中繼器中的代碼。你的功能再次被定義爲中繼器的每個項目，所以移動腳本中繼外：

function CounterTimer(labelElement) 
{ 
    var leave = parseInt(labelElement.data("leave")); 
    var day = Math.floor(leave/(60 * 60 * 24)) 
    var hour = Math.floor(leave/3600) - (day * 24) 
    var minute = Math.floor(leave/60) - (day * 24 *60) - (hour * 60) 
    var second = Math.floor(leave) - (day * 24 *60*60) - (hour * 60 * 60) - (minute*60) 

    hour=hour<10 ? "0" + hour : hour; 
    minute=minute<10 ? "0" + minute : minute; 
    second=second<10 ? "0" + second : second; 

    var remain=day + " days "+hour + ":"+minute+":"+second; 
    leave=leave-1; 
    labelElement.data("leave",leave); 
    labelElement.text(remain); 
} 
function UpdateCounters() { 
    $(".timelabel").each(function() { 
    CounterTimer($(this)); 
    }); 
} 

$(function() { 
    UpdateCounters(); 
    setInterval(UpdateCounters,1000) 
}); 

見這個例子的工作實現：http://jsfiddle.net/mor46k5q/

它所做的是不是ID來識別多個元素，它使用元素標識元素的類。其次，不是寫一個不能被多行重用的全局變量，而是將數據存儲在標籤的DOM對象中。最後，代碼被修改，以便它在文檔中找到的所有時間標籤元素上運行。

一些意見雖然：如您在使用離開秒，你沒有一個確切的時間（它是如何花費的時間之間是否確定留在服務器並在JavaScript執行的開始對秒鐘客戶）。其次，一個假設的遞減假設每秒鐘都會調用該函數。這需要與setInterval時間同步。

Answer 2

<script type="text/javascript" language="javascript"> 
     var leave =60; 

     function CounterTimer() 
     { 
      var day = Math.floor(leave/(60 * 60 * 24)) 
      var hour = Math.floor(leave/3600) - (day * 24) 
      var minute = Math.floor(leave/60) - (day * 24 *60) - (hour * 60) 
      var second = Math.floor(leave) - (day * 24 *60*60) - (hour * 60 * 60) - (minute*60) 

      hour=hour<10 ? "0" + hour : hour; 
      minute=minute<10 ? "0" + minute : minute; 
      second=second<10 ? "0" + second : second; 

      var remain=day + " days "+hour + ":"+minute+":"+second; 
      leave=leave-1; 


      document.getElementById("timelabel").innerHTML=remain; 


     } 
    </script>