Как сделать такую функцию?

#javascript

Есть тег span со значением 15, как через некие интервалы времени уменьшать это значение,
то есть 15, 14, 13, 12, 11.... Использовать метод setInterval, но как уменьшать значение?
    

Ответы

Ответ 1

var interval = setInterval(function () {
  var span = document.querySelector("span")

  if (!--span.textContent) {
    clearInterval(interval)
  }
}, 1000)
15


Ответ 2

var span = document.querySelector(".bonus");
span.innerText = (+span.innerText) - 1;


Ответ 3

Всё становится лучше с jQuery ;)



$.fn.countdown = function(start, period = 1000) {
  this.text(start);
  var t = setInterval(() => this.text() == 1 ? clearInterval(t) : this.text(this.text()-1),
period);
};

$('.bonus').countdown(15);



Счётчик






Почти то же самое на vanillaJs:



function Countdown(selector) {
  var el = document.querySelector(selector), t;
  this.start = start;

  function start(from, interval = 1000, to = 1) {
    el.textContent = from; // Инициализация
    if (t) clearInterval(t); // На случай повторного запуска
    t = setInterval(tick.bind(null, to), interval);
  }
  
  function tick(to) {
    if (!t) return;
    if (el.textContent == to) {
      clearInterval(t); // Остановка таймера
      t = null;
    } else {
      el.textContent--; // Собственно, уменьшение
    }      
  };
}

new Countdown('.bonus').start(15, 500);
Счётчик