javascript - javascript中的SetInterval重复显示而不是更改

Question

我做了一个倒计时，它将显示在表格列中，但它是重复列而不是列中的更改。

该片段将有助于更好地理解问题：（已编辑）

var countDownDate = new Date("Apr 29, 2019 23:56:26").getTime();
var table = document.getElementById("test");
// Update the count down every 1 second
var x = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the distance between now an the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);


  var row = table.insertRow(0);
  var cell1 = row.insertCell(0);
  cell1.innerHTML = days + "d " + hours + "h "
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "EXPIRED";
  }
}, 1000);

.timer_bg {
  background-color: red;
  color: white;
}

<table id="test" class="table table-bordered table-responsive">

</table>

倒计时效果很好，它也在减少，每一秒它都会产生一列，我不希望这样。

更新

另外如何timer_bg在该行中添加类？

标签： javascripthtmlcountdown

Answer 1

将行和单元格的创建移到 setInterval 之外。

var row = table.insertRow(0);
var cell1 = row.insertCell(0);
setInterval(...)

将类添加到行，如下所示：

row.className = 'timer_bg';