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

Question

I have a problem in setting a decreasing timer for the table rows in my code!

I've tried multiple solution but it's just not working

 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 

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

how can I make the counter decrease every second? it only updates when I refresh the page

I guess it has to do with the loop or the setInterval method!

Answer 1

in your code you defined countDownDate in a for loop for all three rows then you define t = countDownDate - now which makes ta negative number because when for loop ends and javascript starts to to run this part of the code the value of countDownDate represents time of Five hectare farming land for lease which happened before now so t = countDownDate - now becomes a negative number then you check wether t is a negative number or not here

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

and because t is a negative number you just stop the interval and it only runs once

if you want to show 0 days 0 minutes . . . for times that has passed i've modified your code as below :

  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>