Показать сообщение отдельно
  #7 (permalink)  
Старый 29.01.2024, 08:15
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,742

Что бы одновременно останавливались и выводились числа с учетом языковой настройки такой код

function counterNumbers() {
    const SELECTORS = {
        wrapper: ".js-counter-numbers-wrapper",
        numbers: ".js-counter-numbers",
        number: ".js-counter-number",
    };
 
    const $wrappers = document.querySelectorAll(SELECTORS.wrapper);
 
    if (!$wrappers.length) return;

    const TIME_COUNT = 6000;  // Время счета

    function counter ($wrapper, timeCount) {
        const $numbers = $wrapper.querySelectorAll(SELECTORS.numbers);
        if (!$numbers.length) return;

        const $numbersText = $wrapper.querySelectorAll(SELECTORS.number);
        
        const endValues = [];
         
        $numbers.forEach(($numberWrapper) => {
            const endValue = parseInt($numberWrapper.dataset.number);
            endValues.push (endValue);
        })

        const timeStart = performance.now();
        
        const form = new Intl.NumberFormat();
        
        function showNumbers (currentTime) {
            let part = (currentTime - timeStart) / timeCount;
            if (part > 1) part = 1;
            for (let i = 0; i < $numbersText.length; i++) {
                const value = Math.round( part * endValues[i]);
                $numbersText[i].textContent = form.format(value);
            }
            if (part < 1) requestAnimationFrame(showNumbers);
        }
        
        requestAnimationFrame(showNumbers);
    }
 
    $wrappers.forEach(($wrapper) => {
        counter ($wrapper, TIME_COUNT);
    });
}
Ответить с цитированием