SetInterval в JavaScript отображается несколько раз вместо изменений - PullRequest
Новая
       7

SetInterval в JavaScript отображается несколько раз вместо изменений

0 голосов
/ 29 апреля 2018

Я сделал обратный отсчет, который будет отображаться в столбце таблицы, но это столбец с повторением вместо изменения в столбце.

Фрагмент поможет лучше понять вопрос: (отредактировано) 

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>

Обратный отсчет работает хорошо, он тоже уменьшается, каждую секунду он генерирует еще один столбец, я этого не хочу.

UPDATE

Также, как добавить класс timer_bg в эту строку?

Ответы [ 2 ]

0 голосов
/ 29 апреля 2018

Самое простое решение - создать фиксированную таблицу и просто ввести измененное время в фиксированный элемент.

Нет необходимости создавать строку и ячейку таблицы. Вы можете просто получить его в исходном HTML.

Обновление 1

Если вам действительно нужно создать элемент динамически, вы должны создать этот элемент вне функции setInterval (Кредиты https://stackoverflow.com/a/50089575/2735286). Там вы также можете добавить свое имя класса. 

var countDownDate = new Date("Apr 29, 2019 23:56:26").getTime();
var table = document.getElementById("targetTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);

// Create a "class" attribute
var att = document.createAttribute("class");
att.value = "timer_bg";
cell1.setAttributeNode(att);

// 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);

  cell1.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s"
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("timer").innerHTML = "EXPIRED";
  }
}, 1000);
<table id="targetTable">
</table>
0 голосов
/ 29 апреля 2018

Переместить создание строк и ячеек за пределы setInterval. 

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

Добавить класс в строку, как показано ниже: 

row.className = 'timer_bg';
...