Есть тег span со значением 15, как через некие интервалы времени уменьшать это значение, то есть 15, 14, 13, 12, 11.... Использовать метод setInterval, но как уменьшать значение?
3 ответа
var interval = setInterval(function () {
var span = document.querySelector("span")
if (!--span.textContent) {
clearInterval(interval)
}
}, 1000)
<span>15</span>
-
А как сделать проверку, если значение span == 1 то выполнить метод clearInterval?– Евгений15 мая 2018 в 20:27
-
-
3@NeedHate, берётся текст из span.textContent, оператором декремента приводится к числу, число уменьшается на 1, записывается обратно в span.textContent (преобразуясь в строку), а также к нему (уменьшенному числу) применяется отрицание, из-за чего 0 превращается в true. Если что (в спане не число), NaN тоже превратится в true, но в спане отобразится NaN.– Qwertiy ♦15 мая 2018 в 20:35
-
-
Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.– Qwertiy ♦15 мая 2018 в 21:48
var span = document.querySelector(".bonus");
span.innerText = (+span.innerText) - 1;
-
А вот у тега span есть класс bonus, "span.innerText = (+span.innerText) - 1;" как это класс в коде записать?) я в Js чайник))– Евгений15 мая 2018 в 20:13
-
Зачем использовать явное приведение к числу, когда там и так вычитание?– Qwertiy ♦15 мая 2018 в 20:40
-
@Qwertiy Я с интересом наблюдаю, как ты это объясняешь под своим ответом ).– user17626215 мая 2018 в 20:42
-
2@Igor, у меня вообще декремент. А тут - просто минус. Но минус тоже сам приводит к числу. Странно, что тут никто не спросил, зачем тут плюс. Да, ещё,
innerText
- это медленное сомнительное свойство, которое в стандарт добавили (кажется добавили) примерно с год назад и которым в 99% случаев пользоваться вообще не надо. От него даже в jQuery отказались.– Qwertiy ♦15 мая 2018 в 20:45
Всё становится лучше с 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);
<span class=bonus>Счётчик</span>
-
-
3
-
-
-
Вроде это считается общепринятой, а не преждевременной. А вообще да - он там уже обёрнут, потому что это плагин, а не обработчик события.– Qwertiy ♦15 мая 2018 в 21:01