Сообщение от рони
|
voraa,
условно в див ноль, каждую секунду это число увеличивается на шаг до указанного максимума.
<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)
};