Счетчик для четырех цифр

[MorenO410]

Доброго времени суток.
Необходима помощь по созданию функции на Java Script
В HTML есть 4 div

<div class="unit__index" data-val="300" id="unit-one">0</div>
<div class="unit__index" data-val="17" id="unit-two">0</div>
<div class="unit__index" data-val="200" id="unit-three">0</div>
<div class="unit__index" data-val="100" id="unit-four">0</div>

Мне нужно написать функцию на Java Script которая поможет создать счетчик цифр, но при этом для каждого числа отдельно
можно было задавать интервал и время вывода.
Для примера четыре числа которые нужно вывести (300, 17, 200, 100) но при этом итоговые цифры могут меняться

[voraa]

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

Вот про это поподробнее.
Какие интервалы? Имеется ли в виду, что время вывода может быть любым. Например, выводить начиная с 29.03.2024 18:30 в течении 18 часов. Или это времена только на время открытой страницы браузера.
Как они задаются?

[MorenO410]

voraa,
Интервал - имеется ввиду шаг счета чисел.
Например нужно сделать счетчик числа до 10 в котором задается шаг чисел
interval (шаг 1) - отсчет 0, 1 , 2, 3, 4.......10
interval (шаг 2) - отсчет 0 , 2, 4, 6.......10
interval (шаг 3) - отсчет 0 , 3, 6, 9

Думаю понятно объяснил

[voraa]

Нет. Непонятно. Что означют эти числа? Что такое шаг1, что означают 0, 1, 2
Что такое шаг2
Какие блоки из первого поста должны при этом выводиться? И в какое время? Что здесь время вывода, и что интервал?

[MorenO410]

Шаг - это перебор чисел от 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();

[рони]

voraa,
условно в див ноль, каждую секунду это число увеличивается на шаг до указанного максимума.

<div class="unit__index" data-val="300" data-interval ="3">0</div>

[MorenO410]

<div class="unit__index" data-val="300" data-interval ="3">0</div>

Совершенно время. До указанного максимума или другими словами до указанного числа
Или же что-то вроде этого, но чтобы код отличался по написанию.
Условия чтобы четыре разных числа одновременного доходили до своего максимума (Пример 4 одновременных максимумов в 4 div (500, 300, 30, 8). Эти 4числа должны отчитаться так чтобы они пришли к своему максимуму одновременно В браузере они выводятся с плюсом (500+, 300+, 30+, 8+)

function animateCounter(element, attributeName) {
	const value = parseInt(element.textContent);
	const time = parseInt(element.getAttribute(attributeName)) || 1000;

	let current = 0;
	let start;

	function updateCounter(timestamp) {
		// !start ? start = timestamp : null

		if (!start) start = timestamp;

		const progress = timestamp - start;
		const increment = value / time;

		if (current < value) {
			current += increment * (progress / 1000);
			element.textContent = Math.floor(current);
			requestAnimationFrame(updateCounter);
		} else {
			element.textContent = value;
		}
	}

	requestAnimationFrame(updateCounter);
}

function setWidth(element) {
	const width = element.offsetWidth;
	element.style.minWidth = width + 4 + "px";
	console.log(width);
	return width;
}

window.onload = () => {
	const counters = document.querySelectorAll("[data-counter]");

	if (counters.length) {
		counters.forEach(setWidth);
		counters.forEach((element) => animateCounter(element, "data-counter"));
	}
	// document.querySelectorAll("[data-counter]").forEach(animateCounter)
};

[voraa]

каждую секунду

Где до этого говорилось про секунду (а не про миллисекунду, минуту, час или сутки)?

document.querySelectorAll("[data-digits-counter]")

Где в первом посте элементы с data-digits-counter? Там только data-val= есть.
Вот я и пытаюсь выяснить точную постановку задачи.

[MorenO410]

Я привел как пример. Мой недочет

[рони]

MorenO410,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.