create a counter with the specified range, step and duration for the specified selector

PHOTO

Sat Feb 26 2022 02:23:23 GMT+0000 (Coordinated Universal Time)

Saved by @mboljar

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;
};

// Example
counter('#my-id', 1, 1000, 5, 2000); // Creates a 2-second timer for the element with id="my-id"

https://madza.hashnode.dev/24-modern-es6-code-snippets-to-solve-practical-js-problems?guid

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

Javascript

@mboljar

hide all elements specified check if the element has the specified class smooth-scroll to the top of the page check if the parent element contains the child element create an object containing the parameters of the current URL encode a set of form elements as an object retrieve a set of properties indicated by the given selectors from an object invoke the provided function after wait (in milliseconds) trigger a specific event on a given element, optionally passing custom data remove an event listener from an element get readable format of the given number of milliseconds get the difference (in days) between two dates make a GET request to the passed URL make a POST request to the passed URL create a counter with the specified range, step and duration for the specified selector copy a string to the clipboard find out if the browser tab of the page is focused create a directory, if it does not exist defer draggable Object.create() Object.create() - Person Object GET request with Callback Web Storage API Web Storage API Browser-level image lazy-loading for the web Browser-level image lazy-loading for the web You can detect support for the loading attribute to load lazysizes as a fallback library only when loading isn't supported Add a web app manifest Front-end Content Management — ExpressionEngine 6.2.7 Documentation- CALLBACK Using lit-html standalone – Lit Working with JSON - Learn web development | MDN Response - An Ajax Call async promise

Browse more snippets >>