step
has the proper sign and change it accordingly.setInterval()
in combination with Math.abs()
and Math.floor()
to calculate the time between each new text draw.Document.querySelector()
, Element.innerHTML
to update the value of the selected element.step
, to use a default step of 1
.duration
, to use a default duration of 2000
ms.const counter = (selector, start, end, step = 1, duration = 2000) => {
let current = start,
_step = (end - start) * step < 0 ? -step : step,
timer = setInterval(() => {
current += _step;
document.querySelector(selector).innerHTML = current;
if (current >= end) document.querySelector(selector).innerHTML = end;
if (current >= end) clearInterval(timer);
}, Math.abs(Math.floor(duration / (end - start))));
return timer;
};
counter('#my-id', 1, 1000, 5, 2000);
// Creates a 2-second timer for the element with id="my-id"
Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️