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)

voraa 29.01.2024 18:21

Цитата:

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

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

https://jsfiddle.net/fa64prL0/

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

NastyaVs 29.01.2024 19:05

Цитата:

Сообщение от voraa (Сообщение 554628)
Я там для элемента, который на 1700 поставил lang="en-En"

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

NastyaVs 29.01.2024 19:58

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"));

voraa 29.01.2024 20:28

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

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

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

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

NastyaVs 29.01.2024 22:14

Цитата:

Сообщение от 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, Решение делает просчет счетчика цифр, сначала когда при скролле пользователь возвращается в данному блоку

voraa 29.01.2024 23:12

Цитата:

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

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

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

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

NastyaVs 29.01.2024 23:31

Цитата:

Сообщение от voraa (Сообщение 554633)
А в чем некорректность?

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


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

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

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

voraa 30.01.2024 08:24

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

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

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

NastyaVs 30.01.2024 11:22

Цитата:

Сообщение от voraa (Сообщение 554635)
А вы сами эти коды пишете? Или надергиваете где то не думая?

Сама учусь, смотря материал на Youtube. Понимаю что очень много ошибок

Цитата:

Сообщение от voraa (Сообщение 554635)
Что у вас означает clearInterval();? (встречается 2 раза)
Какой именно таймер надо сбросить?

Пример реализации брала здесь https://www.youtube.com/watch?v=mSfsGTIQlxg&t=486s

NastyaVs 30.01.2024 11:26

Цитата:

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

Подсмотрела на форуме. Подумала так и должно быть


Часовой пояс GMT +3, время: 00:38.