Javascript-форум - Срабатывания счетчика цифр при иностранном формате чисел

Javascript-форум (https://javascript.ru/forum/)

- Javascript под браузер (https://javascript.ru/forum/css-html/)

- - Срабатывания счетчика цифр при иностранном формате чисел (https://javascript.ru/forum/css-html/85729-srabatyvaniya-schetchika-cifr-pri-inostrannom-formate-chisel.html)

Срабатывания счетчика цифр при иностранном формате чисел

Добрый день, уважаемые специалисты 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();
});

Чего то я не понял про "иностранную разрядность".

Цитата:

Сообщение от NastyaVs

- значения начинали пересвистываться когда при скроле страницы они достигали данного блока с этими значениями.

- и все значения до конечного результата останавливались синхронно.

Как они могут останавливаться синхронно, если начинаются в разное время (когда появятся при скролле)?

Цитата:

Сообщение от voraa (Сообщение 554608)

Чего то я не понял про "иностранную разрядность".

voraa, Обычный формат чисел в тысячах - пишутся 1800 или число 1700
В некоторых странах при разрядности тысячей они отделяются запятой - то есть 1800 пишется как 1,800 или число 1700 пишется как 1,700

Цитата:

Сообщение от voraa (Сообщение 554608)

Как они могут останавливаться синхронно, если начинаются в разное время (когда появятся при скролле)?

voraa, Они же находятся в одном блоке. Вот как это выглядит в коде:
https://codepen.io/AlmUA/pen/xxBpOmp

Цитата:

Сообщение от NastyaVs

некоторых странах при разрядности тысячей они отделяются запятой - то есть 1800 пишется как 1,800 или число 1700 пишется как 1,700

Ну это не сложно
https://developer.mozilla.org/ru/doc...l/NumberFormat

Что такое BASE_DELAY?
Это максимальное время, через которое должен завершиться отсчет?
(по программе это так, судя по
const delay = Math.floor(BASE_DELAY / endValue);
)

Или это все таки интервал, между прибавлениями 1 для max endValue? Тогда все время отсчета будет BASE_DELAY * max endValue в миллисекундах.

Цитата:

Сообщение от voraa (Сообщение 554611)

Ну это не сложно
https://developer.mozilla.org/ru/doc...l/NumberFormat

Я сама не смогу. Пыталась

Цитата:

Что такое BASE_DELAY?
Это максимальное время, через которое должен завершиться отсчет?
(по программе это так, судя по
const delay = Math.floor(BASE_DELAY / 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);
    });
}

Цитата:

Сообщение от voraa (Сообщение 554615)

Что бы одновременно останавливались и выводились числа с учетом языковой настройки такой код

Не срабатыват

Цитата:

Сообщение от NastyaVs

Не срабатыват

У меня CSS нет, поэтому так смотрите. Все работает
https://jsfiddle.net/013sf5w9/

voraa,
Сработало.
Но как добиться того чтобы разделитель в тысячных числах был не через пробел:
2 800
а через запятую
2,800

То есть как бы по факту работа счетчика (отсчета) нужна: Чтобы значения которые идут в тысячах отделялись не через пробел как сейчас, а через запятую 2,800. Можно пожалуйста так так сделать?

https://dropmefiles.com/PHIbt - вот на видео сейчас тысячи счетчик отчитывает через пробел нижние числа, а верхние как бы хотелось через запятую.

Цитата:

Сообщение от NastyaVs

Но как добиться того чтобы разделитель в тысячных числах был не через пробел:

Пробел или запятая или еще что зависит от настроек браузера, сайта или элемента.
Например можно задавать, через атрибут lang в самом html или в конкретном элементе. Брать значение этого атрибута и указывать.
Например
const form = new Intl.NumberFormat('en-En');
или
const form = new Intl.NumberFormat('ru');

https://jsfiddle.net/fa64prL0/

Я там для элемента, который на 1700 поставил lang="en-En"

Цитата:

Сообщение от voraa (Сообщение 554628)

Я там для элемента, который на 1700 поставил lang="en-En"

Теперь поняла. Спасибо Вам большое за уделенное время

voraa,
К вашему варианту еще решила добавить такую процедуру чтобы счетчик срабатывал только тогда когда при скролле достигнет этого блока, но так понимаю он не сработает:

const check = new IntersectionObserver(
	(entries) => {
		entries.forEach((entry) => {
			if (entry.isIntersecting) {
				check.disconnect();
				counterNumbers();
			}
		});
	},
	{
		root: null, // viewport, для отслеживания в пределах другого элемента (указать в этом месте)
		rootMargin: "0px", // margin вокруг root
		threshold: 1, // пороговое значение для отображения (100% для элемента)
	}
);

check.observe(document.querySelector(".block__item_grid"));

Что такое check.disconnect(); ?

А так может и сработает. Пробовать надо.
Сам не могу не имея полного кода с CSS.

Только надо понять, а что дальше. Ну сработал обсервер, начали циферки
тикать. А пользователь дальше мышью крутит туда-сюда. Когда элемент появится снова опять надо считать или хватит одного первого раза.
А если опять считать, когда еще предыдущий не закончился, то все равно начинать снова с 0, или дать закончиться предыдущему циклу.

Все эти вопросы надо продумывать.

Цитата:

Сообщение от voraa (Сообщение 554631)

Что такое check.disconnect(); ?

voraa, Точно не скажу. Решение нашла.

if (entry.isIntersecting) {
	            // сработает когда элемент будет виден на 90%
	            observer.disconnect();
	            startProgress();

По моему в ней и крылась ошибка. Я ее исключила и вроде бы как заработало. Я пробовала, посмотрите, пожалуйста: https://codepen.io/NastyaVs/pen/vYPpvXP

Только не очень корректно срабатывает у меня когда возврат к блоку происходит при скролле

Цитата:

Сообщение от voraa (Сообщение 554631)

Только надо понять, а что дальше. Ну сработал обсервер, начали циферки тикать. А пользователь дальше мышью крутит туда-сюда. Когда элемент появится снова опять надо считать или хватит одного первого раза.

voraa, Вроде бы в этом решении все реализовано.

Цитата:

Сообщение от voraa (Сообщение 554631)

А если опять считать, когда еще предыдущий не закончился, то все равно начинать снова с 0, или дать закончиться предыдущему циклу.

voraa, Решение делает просчет счетчика цифр, сначала когда при скролле пользователь возвращается в данному блоку

Цитата:

Сообщение от NastyaVs

Решение делает просчет счетчика цифр, сначала когда при скролле пользователь возвращается в данному блоку

Если так и задумывалось, то вроде работает

Цитата:

Сообщение от NastyaVs

Только не очень корректно срабатывает у меня когда возврат к блоку происходит при скролле

А в чем некорректность?

Цитата:

Сообщение от voraa (Сообщение 554633)

А в чем некорректность?

В принципе так и задумывалось. Но такое ощущение если возвращаться к блоку и скроллить очень медленно и когда только видишь краешек блока заметные старые значения. А если блок уже существенную часть видно уже на экране то отсчет идет сначала как и задумывалось.

Вот только мои Progress Bar ведут себя абсолютно безобразно при таком решении.

1. Первый Progress Bar - при первом обращении все корректно показывает. Но при возврате к нему обратно при скролле счетчик чисел считает бесконечно значения, а сам зеленый бар замкнулся и не все.

2. Второй Progress Bar - при первом обращении счетчик цифр отрабатывает очень быстро не успеваешь к нему даже дойти чтобы увидеть как пролистываются цифры. При этом зеленый бар при первом подходе отображается как надо. Но уже при повторном возврате ко всему Progress Bar он абсолютно не осуществляет повторно никаких действий. Можете посмотреть в чем ошибка:
https://codepen.io/NastyaVs/pen/qBvpgLb

А вы сами эти коды пишете? Или надергиваете где то не думая?
Что у вас означает clearInterval();? (встречается 2 раза)
Какой именно таймер надо сбросить?

Почему 2 раза вызывается startProgress(); и еще один раз вызываются без счетчики без функции?

Я уже показывал, как делать анимацию с помощью requestAnimationFrame. А вы опять setInterval городите.
Хотите, что бы опять все кто то переделывал?

Цитата: