帶有日期時間倒計時的forEach循環的setTimeout嗎？

Question

我正在嘗試創建一個腳本，該腳本循環遍歷html元素的數組，並使用setTimeout為每個元素創建一個倒計時。 我真的不知道為什么這不起作用，但是這是我的代碼，它給了我console.log。 控制台日志>

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

這是代碼>

  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

1. 第一個產品的ID值具有“ hasta1”。 這應該是“ hasta ”

2. HTML元素應具有唯一的ID。
   這可以通過

a）使用“數據ID”屬性代替“ ID”屬性，更改所有

    <span id="hasta">

進入

    <span data-id="hasta">

b）通過選擇使選擇器找到這些元素

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

至

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

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

4. 將setTimeout更改為setInterval ，如

    var timer = setInterval(recorrido, 2000); 

應該重復調用recorrido直到計時器在cdtd停止（未經測試）。 盡管調用clearTimeout與clearInterval的作用相同，但停止計時器可以使用clearInterval進行澄清。

---

更新：警告：如果類名也用於樣式，請避免使用類選擇器來查找元素。 使用數據屬性提供了一種替代方法。

在此示例中， <ul class="tiempo">和<p class="tiempo">匹配.tiempo的選擇器。 如果具有此類名稱的元素的內容設置為顯示剩余時間，則將首先更新list元素，並使用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';
}