Счетчик для четырех цифр
Доброго времени суток.
Необходима помощь по созданию функции на 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) но при этом итоговые цифры могут меняться |
Цитата:
Какие интервалы? Имеется ли в виду, что время вывода может быть любым. Например, выводить начиная с 29.03.2024 18:30 в течении 18 часов. Или это времена только на время открытой страницы браузера. Как они задаются? |
voraa,
Интервал - имеется ввиду шаг счета чисел. Например нужно сделать счетчик числа до 10 в котором задается шаг чисел interval (шаг 1) - отсчет 0, 1 , 2, 3, 4.......10 interval (шаг 2) - отсчет 0 , 2, 4, 6.......10 interval (шаг 3) - отсчет 0 , 3, 6, 9 Думаю понятно объяснил |
Нет. Непонятно. Что означют эти числа? Что такое шаг1, что означают 0, 1, 2
Что такое шаг2 Какие блоки из первого поста должны при этом выводиться? И в какое время? Что здесь время вывода, и что интервал? |
Шаг - это перебор чисел от 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> |
Цитата:
Или же что-то вроде этого, но чтобы код отличался по написанию. Условия чтобы четыре разных числа одновременного доходили до своего максимума (Пример 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) }; |
Цитата:
Цитата:
Вот я и пытаюсь выяснить точную постановку задачи. |
Я привел как пример. Мой недочет
|
MorenO410,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Часовой пояс GMT +3, время: 07:40. |