Показать сообщение отдельно
  #5 (permalink)  
Старый 19.01.2024, 12:04
Интересующийся
Отправить личное сообщение для MorenO410 Посмотреть профиль Найти все сообщения от MorenO410
 
Регистрация: 18.01.2024
Сообщений: 21

Шаг - это перебор чисел от 0 до необходимого числа.
Пример нужно просчитать итоговое число 10 с шагом 1.
То числа от 0 до 10 с шагом 1 будут считаться по счетчику следуюшим образом 0, 1, 2, 3, 4, 5 ,6 ,7, 8, 9 ,10

Либо же к примеру нужно просчитать итоговое число 10 с шагом 1
То числа от 0 до 10 с шагом 2 будут считаться по счетчику следуюшим образом 0, 2, 4, 6, 8, ,10

Либо же пускай шаг чисел для всех будет одинаковым, но 4 разных числа должны закончится одновременно в одно и тоже время.

Что-то вроде этого:

function digitsCounter() {
	// Обнуление
	if (document.querySelectorAll("[data-digits-counter]").length) {
		document.querySelectorAll("[data-digits-counter]").forEach((element) => {
			element.dataset.digitsCounter = element.innerHTML;
			element.innerHTML = `0`;
		});
	}

	// Функция инициализации
	function digitsCountersInit(digitsCountersItems) {
		let digitsCounters = digitsCountersItems
			? digitsCountersItems
			: document.querySelectorAll("[data-digits-counter]");
		if (digitsCounters.length) {
			digitsCounters.forEach((digitsCounter) => {
				digitsCountersAnimate(digitsCounter);
			});
		}
	}

	// Анимация
	function digitsCountersAnimate(digitsCounter) {
		let startTimestamp = null;
		const duration = parseInt(digitsCounter.dataset.digitsCounterSpeed)
			? parseInt(digitsCounter.dataset.digitsCounterSpeed)
			: 1000;
		const startValue = parseInt(digitsCounter.dataset.digitsCounter);
		const startPosition = 0;

		const step = (timestamp) => {
			if (!startTimestamp) startTimestamp = timestamp;
			const progress = Math.min((timestamp - startTimestamp) / duration, 1);
			digitsCounter.innerHTML = Math.floor(progress * (startPosition + startValue));
			if (progress < 1) {
				window.requestAnimationFrame(step);
			}
		};

		window.requestAnimationFrame(step);
	}

	//Вызов инициализации без действия
	digitsCountersInit();
}

digitsCounter();

Последний раз редактировалось MorenO410, 19.01.2024 в 12:53.
Ответить с цитированием