Добрый день, уважаемые специалисты JS.
Прошу Вас помочь в доработке кода на JS для счетчика цифр, который позволял бы:
- перелистывать значения которые находятся в иностранной разрядности цифр (сейчас у меня значения в обычном формате 2800, 1700, 106, 720. А нужно чтобы эти же значения код смог перелистывать когда они находятся в формате с иностранной разрядностью, а именно (2,800, 1,700, 106, 720))
- значения начинали пересвистываться когда при скроле страницы они достигали данного блока с этими значениями.
- и все значения до конечного результата останавливались синхронно.
Это то что я смога реализовать самостоятельно:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="css/style.css">
<title>Values</title>
</head>
<body>
<div class="wrapper">
<main>
<div class="block js-counter-numbers-wrapper">
<div class="block__container">
<div class="block__grid">
<div class="block__item_grid block__item_grid--info-mod">
<div class="block__row">
<div class="block__col">
<div data-number="2800" class="block__numbers js-counter-numbers">
<div class="block__number_sizer">2800</div>
<div class="block__number js-counter-number">0</div>
</div>
<div class="block__text">
<p>Projects</p>
</div>
</div>
<div class="block__col">
<div data-number="106" class="block__numbers js-counter-numbers">
<div class="block__number_sizer">1060</div>
<div class="block__number js-counter-number">0</div>
</div>
<div class="block__text">
<p>Years</p>
</div>
</div>
</div>
<div class="block__row">
<div class="block__col">
<div data-number="1700" class="block__numbers js-counter-numbers">
<div class="block__number_sizer">106</div>
<div class="block__number js-counter-number">0</div>
</div>
<div class="block__text">
<p>Clients</p>
</div>
</div>
<div class="block__col">
<div data-number="720" class="block__numbers js-counter-numbers">
<div class="block__number_sizer">1670</div>
<div class="block__number js-counter-number">0</div>
</div>
<div class="block__text">
<p>Directions</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<script src="js/app.js"></script>
</body>
</html>
function counterNumbers() {
const SELECTORS = {
wrapper: ".js-counter-numbers-wrapper",
numbers: ".js-counter-numbers",
number: ".js-counter-number",
};
const $wrappers = document.querySelectorAll(SELECTORS.wrapper);
if (!$wrappers.length) return;
const BASE_DELAY = 200;
$wrappers.forEach(($wrapper) => {
const $numbers = $wrapper.querySelectorAll(SELECTORS.numbers);
if (!$numbers.length) return;
$numbers.forEach(($numberWrapper) => {
const $number = $numberWrapper.querySelector(SELECTORS.number);
const endValue = parseInt($numberWrapper.dataset.number);
if (!endValue) return;
const delay = Math.floor(BASE_DELAY / endValue);
const interval = setInterval(() => {
const currentNum = parseInt($number.innerText);
if (currentNum >= endValue) clearInterval(interval);
else $number.innerText = currentNum + 1;
}, delay);
});
});
}
window.addEventListener("load", () => {
counterNumbers();
});