Срабатывания счетчика цифр при иностранном формате чисел
Добрый день, уважаемые специалисты 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();
});
|
Чего то я не понял про "иностранную разрядность".
Цитата:
|
Цитата:
В некоторых странах при разрядности тысячей они отделяются запятой - то есть 1800 пишется как 1,800 или число 1700 пишется как 1,700 |
Цитата:
https://codepen.io/AlmUA/pen/xxBpOmp |
Цитата:
https://developer.mozilla.org/ru/doc...l/NumberFormat Что такое BASE_DELAY? Это максимальное время, через которое должен завершиться отсчет? (по программе это так, судя по const delay = Math.floor(BASE_DELAY / endValue); ) Или это все таки интервал, между прибавлениями 1 для max endValue? Тогда все время отсчета будет BASE_DELAY * max endValue в миллисекундах. |
Цитата:
Цитата:
|
Что бы одновременно останавливались и выводились числа с учетом языковой настройки такой код
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 TIME_COUNT = 6000; // Время счета
function counter ($wrapper, timeCount) {
const $numbers = $wrapper.querySelectorAll(SELECTORS.numbers);
if (!$numbers.length) return;
const $numbersText = $wrapper.querySelectorAll(SELECTORS.number);
const endValues = [];
$numbers.forEach(($numberWrapper) => {
const endValue = parseInt($numberWrapper.dataset.number);
endValues.push (endValue);
})
const timeStart = performance.now();
const form = new Intl.NumberFormat();
function showNumbers (currentTime) {
let part = (currentTime - timeStart) / timeCount;
if (part > 1) part = 1;
for (let i = 0; i < $numbersText.length; i++) {
const value = Math.round( part * endValues[i]);
$numbersText[i].textContent = form.format(value);
}
if (part < 1) requestAnimationFrame(showNumbers);
}
requestAnimationFrame(showNumbers);
}
$wrappers.forEach(($wrapper) => {
counter ($wrapper, TIME_COUNT);
});
}
|
Цитата:
|
Цитата:
https://jsfiddle.net/013sf5w9/ |
voraa,
Сработало. Но как добиться того чтобы разделитель в тысячных числах был не через пробел: 2 800 а через запятую 2,800 То есть как бы по факту работа счетчика (отсчета) нужна: Чтобы значения которые идут в тысячах отделялись не через пробел как сейчас, а через запятую 2,800. Можно пожалуйста так так сделать? https://dropmefiles.com/PHIbt - вот на видео сейчас тысячи счетчик отчитывает через пробел нижние числа, а верхние как бы хотелось через запятую. |
| Часовой пояс GMT +3, время: 16:15. |