为每个表格行JS设置一个计时器

时间:2019-07-11 20:00:58

标签: javascript html timer

我在为代码中的表行设置递减计时器时遇到问题!

我已经尝试了多种解决方案,但是它不起作用

success: function (data) {

  window.open(data);

},
window.onload = function() {
  var table = document.getElementById("bidsTable");
  var x = setInterval(function() { 
  for (var i = 1, row; row = table.rows[i]; i++) {
    var endDate = row.cells[4];
      countDownDate = new Date(endDate.innerHTML.replace(/-/g, "/")).getTime();
    var countDown = row.cells[5];
    var now = new Date().getTime(); 
    var t = countDownDate - now; 
    var days = Math.floor(t / (1000 * 60 * 60 * 24)); 
    var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60)); 
    var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60)); 
    var seconds = Math.floor((t % (1000 * 60)) / 1000); 
countDown.innerHTML = days + "d " 
+ hours + "h " + minutes + "m " + seconds + "s "; 
    if (t < 0) { 
      clearInterval(x); 
    }
  }
}, 1000);} //1000 show the code every second

如何使计数器每秒减少一次?     它仅在刷新页面时更新

我想这与循环或setInterval方法有关!

1 个答案:

答案 0 :(得分:0)

在您的代码中,为所有三行在for循环中定义了countDownDate,然后定义了t = countDownDate - now,它使ta为负数,因为当for循环结束并且javascript开始运行这段代码时countDownDate的值表示之前发生的五公顷农地出租时间,因此t = countDownDate - now变为负数,然后检查此处是否为负数

if (t < 0) { clearInterval(x); }

并且由于t为负数,您只需停止间隔并且它只运行一次

如果要显示0天0分钟。 。 。对于已经过去的时间,我修改了您的代码,如下所示:

 window.onload = function() {



    var table = document.getElementById("bidsTable");

var x = setInterval(function() {
  var now = new Date().getTime();
      for (var i = 1, row; row = table.rows[i]; i++) {

                                var endDate = row.cells[4];
                                countDownDate = new Date(endDate.innerHTML.replace(/-/g, "/")).getTime();
                                var countDown = row.cells[5];
                                var t = countDownDate - now;

var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
if(t<0){
  days = 0;
  hours = 0;
  minutes = 0;
  seconds = 0;
}
countDown.innerHTML = days + "d "
+ hours + "h " + minutes + "m " + seconds + "s ";
}
}, 1000);} //1000 show the code every second
<table  style="width: 100%" id="bidsTable">
  <thead>
    <tr>
      <th>Title</th>
      <th >Amount</th>
      <th >Start Date</th>
      <th >Bids</th>
      <th >End Date</th>
      <th ></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >Peugeot 406 car fro sale</td>
      <td >800000.00</td>
      <td >2020-04-10 3:48:47 PM</td>
      <td >1</td>
      <td >2020-05-10 3:48:47 PM</td>
      <td ></td>
    </tr>
    <tr>
      <td >House for sale in Kubwa</td>
      <td >4000000.00</td>
      <td >2017-04-10 3:48:47 PM</td>
      <td >0</td>
      <td >2017-06-10 3:48:47 PM</td>
      <td ></td>
    </tr>
    <tr>
      <td >Five hectare farming land for lease</td>
      <td >3000000.00</td>
      <td >2017-04-10 3:48:47 PM</td>
      <td >0</td>
      <td >2017-07-10 3:48:47 PM</td>
      <td id="demo" ></td>
    </tr>
  </tbody>
</table>