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

    <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>

Answer 2

当您混合使用服务器端代码和客户端代码时，您不认为在客户端，元素的ID应该是唯一的。因此getElementById只返回它找到的第一个元素（注意它不叫做getElement s ById）。

为了更简单的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对象中。最后修改一个代码，使其在文档中找到的所有timelabel元素上运行。

虽然有一些观察结果：当你使用剩下的秒数时，你没有准确的时间（你确定服务器上的剩余秒数和客户端上的javascript执行开始之间需要多长时间））。其次，假的减少假定函数每秒调用一次。这需要与setInterval时序同步。

数据列表中缺少数据复制

2 个答案: