Javascript.RU

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

Пример 1
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();



Пример 2
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)
};

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Правильно вызвать массив biryukovm Элементы интерфейса 3 19.03.2018 13:31
Поиск и обвертка для цифр в таблице Tipylja Общие вопросы Javascript 3 13.03.2018 17:54
как запретить отправку формы если маил занят. daimon0482 AJAX и COMET 9 21.06.2017 04:09
счетчик для onmousemove neWjs Events/DOM/Window 17 27.05.2012 21:04