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

265

22 мая 2018, 18:40

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

Answer 1

var interval = setInterval(function () { 
  var span = document.querySelector("span") 
 
  if (!--span.textContent) { 
    clearInterval(interval) 
  } 
}, 1000)

<span>15</span>

Answer 2

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<span class=bonus>Счётчик</span>

Почти то же самое на 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);