Разделитель тысяч запятых JS для счетчика?

У меня есть рабочий раздел счетчика номеров на сайте, над которым я работаю, и я не очень хорошо знаю JS, у меня есть код, который работает, но он ломает внешний интерфейс и останавливает счетчик. Я надеюсь, что кто-то может помочь мне понять, как правильно собрать кусочки, которые у меня есть.

Пробовал обе функции по отдельности и вместе, наверное неправильно. Вторая функция, которая имеет дело с тысячной запятой, работает, однако она отключает внешний интерфейс и функцию подсчета.

Я не уверен, что случилось с элементом #shiva, но я заменил его в целом на #counter, так как функция работает по всем направлениям, а не только по одному элементу div. Я оставил оба только сейчас на случай, если есть другой способ.

HTML:

<div id = "counter">
    <div class = "row">
        <div class = "col span-1-of-2">
            <div class = "row">
                <div id = "shiva"><span class = "count">1688019</span></div>
                <h2>Text</h2>
            </div>

            <div class = "row">
                <div id = "shiva"><span class = "count">82150</span></div>
                <h2>Text</h2>
            </div>
        </div>

        <div class = "col span-1-of-2">
            <div class = "row">
                <div id = "shiva"><span class = "count">10505</span></div>
                <h2>Text</h2>
            </div>

            <div class = "row">
                <div id = "shiva"><span class = "count">168260</span></div>
                <h2>Text</h2>
            </div>

        </div>
    </div>
    </div>

Прилавок:

$('.count').each(function () {
    $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
    }, {
        duration: 2000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

Разделитель:

    function numberWithCommas(number) {
    var parts = number.toString().split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return parts.join('.');
}

$('#counter').each(function () {
    var num = $(this).text();
    var commaNum = numberWithCommas(num);
    $(this).text(commaNum);
});

1-й из всех Сохранить идентификаторы (#), специфичные для отдельных элементов, использовать синтаксис атрибута класса для нескольких элементов.

Francis Leigh 25.03.2019 17:29

У меня было это до Фрэнсиса, но средство форматирования работало только с первым элементом div, а не со всеми четырьмя.

Caitlin 25.03.2019 17:30
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
450
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Кто-то ответил, используя аналогичный пример с запятой тысячами, вам просто нужно было адаптировать его для вашей ситуации. Читать здесь Как напечатать число с запятыми в качестве разделителей тысяч в JavaScript

Счетчик нужно заменить после того, как он оживится,

 $('.count').each(function () {
        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 2000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
                $(this).text(convert($(this).text()))
            }
        });
    });

Шаги:

  • Перебрать каждый элемент .count
  • Замените каждое число .count результатом, возвращаемым нашими функциями.
  • Наша функция использует регулярное выражение для форматирования строки, объединения и соединения
  • Установите значение в .count для нашего нового результата

Example

  

 const convert = str => {
        // Find the number
        let regx = /(\d{1,3})(\d{3}(?:,|$))/;
        // Set a variable
        let currStr;
        // Start loop
        do {
            // Replace current string, split it
            currStr = (currStr || str.split(`.`)[0])
                .replace(regx, `$1,$2`)
        } while (currStr.match(regx)); // Loop

        // Return our result from function
        return (str.split(`.`)[1]) ?
            currStr.concat(`.`, str.split(`.`)[1]) :
            currStr;
    };


    function total() {
        let total = 0;
        $('.count').each(function() {
           let v = parseInt($(this).text());
           total = v + total
        })
        return total;
    }

    $('.count').each(function () {
        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 2000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
                $(this).text(convert($(this).text()))
            }
        });
    });
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "counter">
    <div class = "row">
        <div class = "col span-1-of-2">
            <div class = "row">
                <div id = "shiva"><span class = "count">1688019</span></div>
                <h2>Text</h2>
            </div>

            <div class = "row">
                <div id = "shiva"><span class = "count">82150</span></div>
                <h2>Text</h2>
            </div>
        </div>

        <div class = "col span-1-of-2">
            <div class = "row">
                <div id = "shiva"><span class = "count">10505</span></div>
                <h2>Text</h2>
            </div>

            <div class = "row">
                <div id = "shiva"><span class = "count">168260</span></div>
                <h2>Text</h2>
            </div>

        </div>
    </div>
</div>

Это работает хорошо, но функция подсчета теперь не работает.

Caitlin 25.03.2019 17:39

@CaitlinMooney это не предназначено для добавления в ваш код. Это замена вашего кода. Это полный скрипт и HTML. Вы помещаете Javascript в <script> tag </script> и html в свое тело.

ABC 25.03.2019 17:41

Я вижу, чего ты хочешь, ты тоже хотел счетчик.

ABC 25.03.2019 17:43

Да я так и сделал, теперь счетчик не считает а стоит статично. Раньше у меня был счетчик, который анимировал от 0 до заданного числа.

Caitlin 25.03.2019 17:43

@CaitlinMooney, можешь проверить сейчас?

ABC 25.03.2019 17:58

Теперь работает блестяще, спасибо за помощь, я посмотрю и сделаю некоторые справочные заметки!

Caitlin 25.03.2019 18:00

@CaitlinMooney Я заметил, что анимация работает и заменяет запятые. Но я заметил, что сумма не точна, я исправляю это. Просто дай мне немного.

ABC 25.03.2019 18:03

Извините, я отключился вчера, рад, что вы получили свое решение, просто подумал, что я хотел бы отметить, что вы можете использовать val.toLocaleString('en') для добавления запятых к вашим числам (убедитесь, что val является числом, а не строкой, добавив + к val например, val = +val)

Francis Leigh 26.03.2019 11:57

работает с 3.3.1/jquery.min.js, но не с jquery/jquery.min.js?ver=3.5.1

MAZ 01.04.2021 12:00

@MAZ Спасибо за уведомление, советую OP принять к сведению.

ABC 02.04.2021 07:41

Другие вопросы по теме