Question

我正在尝试创建一个循环遍历html元素数组的脚本，并使用setTimeout为每个元素创建一个倒计时。我真的不知道为什么这不起作用，但这是我的代码，它给我的console.log。控制台日志＆gt;

-1481055605166  testing.html:61:5
End  testing.html:64:5
days-> -17142-hours->-21-minutes->-21-second->-6  testing.html:75:5
NaN  testing.html:61:5
days-> NaN-hours->NaN-minutes->NaN-second->NaN  testing.html:75:5
NaN  testing.html:61:5
days-> NaN-hours->NaN-minutes->NaN-second->NaN*

这是代码＆gt;

  var productos = document.querySelectorAll(".producto.med");

  function recorrido() {
    productos.forEach(function(item) {
      var hora = item.querySelector("#hasta");
      cdtd(hora);
    });
  }
  var timer = setTimeout(recorrido, 2000);

  function cdtd(dia) {
    var xmas = new Date(dia);
    var now = new Date();
    var timeDiff = xmas.getTime() - now.getTime();
    console.log(timeDiff);
    if (timeDiff <= 0) {
      clearTimeout(timer);
      console.log("End");
      // Run any code needed for countdown completion here
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %= 60;
    var total = 'days-> ' + days + '-hours->' + hours + '-minutes->' + minutes + '-second->' + seconds;
    console.log(total);
  }

<article class="producto med" id='{{$producto->id}}'>
  <h4>uno</h4>
  <div class="img-producto">
    <img src="{{$producto->ruta_imagen}}" alt="producto">
  </div>
  <div class="datos-producto">
    <ul class="tiempo">
      <li>desde: <span>{{$producto->fecha_inicio}}</span>
      </li>
      <li>hasta: <span id="hasta1">2016-12-12 15:45:00</span>
      </li>
    </ul>
    <p class="restante">tiempo restante:</p>
    <p class="tiempo">12hs 43m 03s</p>//JS PARA COUNTDOWNL
  </div>
  <a href="" class="ofertar">Ofertar ahora</a>
</article>
<article class="producto med" id='{{$producto->id}}'>
  <h4>dos</h4>
  <div class="img-producto">
    <img src="{{$producto->ruta_imagen}}" alt="producto">
  </div>
  <div class="datos-producto">
    <ul class="tiempo">
      <li>desde: <span>{{$producto->fecha_inicio}}</span>
      </li>
      <li>hasta: <span id="hasta">2017-12-12 15:45:00</span>
      </li>
    </ul>
    <p class="restante">tiempo restante:</p>
    <p class="tiempo">12hs 43m 03s</p>//JS PARA COUNTDOWNL
  </div>
  <a href="" class="ofertar">Ofertar ahora</a>
</article>
<article class="producto med" id='{{$producto->id}}'>
  <h4>tres</h4>
  <div class="img-producto">
    <img src="{{$producto->ruta_imagen}}" alt="producto">
  </div>
  <div class="datos-producto">
    <ul class="tiempo">
      <li>desde: <span>{{$producto->fecha_inicio}}</span>
      </li>
      <li>hasta: <span id="hasta">2016-12-12 15:45:00</span>
      </li>
    </ul>
    <p class="restante">tiempo restante:</p>
    <p class="tiempo">12hs 43m 03s</p>//JS PARA COUNTDOWNL
  </div>
  <a href="" class="ofertar">Ofertar ahora</a>
</article>

Answer 1

第一个产品的id值为“hasta1”。这应该是“hasta”
HTML元素应该有唯一的ID 这可以通过

a）使用“data-id”属性而不是“id”属性，更改所有

    <span id="hasta">

进入

    <span data-id="hasta">

b）通过更改

       var hora = item.querySelector("#hasta");

到

       var hora = item.querySelector("[data-id=hasta]");

Nan值表示用于Date的数据值无效：这是因为HTMLSpan元素正在传递给cdtd，而不是字符串。解决此问题的一种方法是在cdtd
的开头添加一个语句
```
  function cdtd(dia) {

   // get text before creating date

      dia = dia.textContent || dia.innerText;       
      var xmas = new Date(dia);

   // ... and continue  
```

将setTimeout更改为setInterval，如

var timer = setInterval(recorrido, 2000);

应重复调用recorrido，直到计时器在cdtd（未测试）中停止。尽管调用clearInterval与clearTimeout做同样的事情，但为了清晰起见，停止计时器可以使用clearInterval。

更新：

在此示例中，<ul class="tiempo">和<p class="tiempo">都匹配.tiempo的选择器。如果具有此类名称的元素将其内容设置为显示剩余时间，则将首先更新列表元素并使用data-id="hasta"属性销毁子元素。这会产生dia null的值。

Answer 2

您似乎正在寻找页面中列出的内容：http://www.htmlgoodies.com/html5/javascript/calculating-the-difference-between-two-dates-in-javascript.html#fbid=S_-Ojf9buFk

只要你能计算一个毫秒数间隔，您可以通过除以总数来得出一个数字毫秒，是所需间隔内的毫秒数。更重要的是，我们可以应用模数（％）运算符去除它值以确定下一个较大的间隔。关键是要永远去从最小的间隔 - 毫秒 - 到最大的天数：

Date.daysBetween = function( date1, date2 ) {
  //Get 1 day in milliseconds
  var one_day=1000*60*60*24;

  // Convert both dates to milliseconds
  var date1_ms = date1.getTime();
  var date2_ms = date2.getTime();

  // Calculate the difference in milliseconds
  var difference_ms = date2_ms - date1_ms;
  //take out milliseconds
  difference_ms = difference_ms/1000;
  var seconds = Math.floor(difference_ms % 60);
  difference_ms = difference_ms/60; 
  var minutes = Math.floor(difference_ms % 60);
  difference_ms = difference_ms/60; 
  var hours = Math.floor(difference_ms % 24);  
  var days = Math.floor(difference_ms/24);

  return days + ' days, ' + hours + ' hours, ' + minutes + ' minutes, and ' + seconds + ' seconds';
}

具有日期时间倒计时的forEach循环的setTimeout？

2 个答案: