У меня есть рабочий раздел счетчика номеров на сайте, над которым я работаю, и я не очень хорошо знаю 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);
});
У меня было это до Фрэнсиса, но средство форматирования работало только с первым элементом div, а не со всеми четырьмя.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Кто-то ответил, используя аналогичный пример с запятой тысячами, вам просто нужно было адаптировать его для вашей ситуации. Читать здесь Как напечатать число с запятыми в качестве разделителей тысяч в 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()))
}
});
});
Шаги:
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>Это работает хорошо, но функция подсчета теперь не работает.
@CaitlinMooney это не предназначено для добавления в ваш код. Это замена вашего кода. Это полный скрипт и HTML. Вы помещаете Javascript в <script> tag </script> и html в свое тело.
Я вижу, чего ты хочешь, ты тоже хотел счетчик.
Да я так и сделал, теперь счетчик не считает а стоит статично. Раньше у меня был счетчик, который анимировал от 0 до заданного числа.
@CaitlinMooney, можешь проверить сейчас?
Теперь работает блестяще, спасибо за помощь, я посмотрю и сделаю некоторые справочные заметки!
@CaitlinMooney Я заметил, что анимация работает и заменяет запятые. Но я заметил, что сумма не точна, я исправляю это. Просто дай мне немного.
Извините, я отключился вчера, рад, что вы получили свое решение, просто подумал, что я хотел бы отметить, что вы можете использовать val.toLocaleString('en') для добавления запятых к вашим числам (убедитесь, что val является числом, а не строкой, добавив + к val например, val = +val)
работает с 3.3.1/jquery.min.js, но не с jquery/jquery.min.js?ver=3.5.1
@MAZ Спасибо за уведомление, советую OP принять к сведению.
1-й из всех Сохранить идентификаторы (
#), специфичные для отдельных элементов, использовать синтаксис атрибута класса для нескольких элементов.