Счетчик для четырех цифр
Доброго времени суток.
Необходима помощь по созданию функции на 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, время: 21:43. |