javascript - 数据列表中缺少数据复制

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 只返回它找到的第一个元素(注意它不称为 getElementsById)。

为了更简单的 JavaScript，您应该包含/使用 jQuery，因此在您的页面中添加对它的引用。

将时间标签的 html 更改为:

<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 之间花费了多长时间) )。其次，leave 减一假设该函数每秒被调用一次。这需要与 setInterval 计时同步。