Как добавить разделитель?
в последнем итеме число 200000, сейчас там пробел
вместо запятой (200,000)
$(document).ready(function() {
function loading() {
$('.data__item').each(function() {
const $this = $(this);
const $value = $this.find('.data__count');
const value = $this.find('.data__count').data('progress-value');
$({
value: 0
}).animate({
value,
}, {
duration: 1000,
step: function load_animate(val) {
$value.text(`${val.toFixed(0).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1 ")} `);
},
});
});
}
loading();
})
.data {
background-repeat: no-repeat;
background-size: cover;
padding-top: 65px;
}
.data__wrap {
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
}
.data__item {
width: calc(25% - 40px);
margin: 0 20px;
margin-bottom: 80px;
}
.data__item:last-child .data__desc {
max-width: 195px;
}
.data__count {
font-size: 30px;
line-height: 1.3;
color: #68bec4;
text-align: center;
padding-bottom: 20px;
font-weight: 800;
}
.data__desc {
position: relative;
max-width: 130px;
padding-top: 30px;
margin: 0 auto;
}
.data__desc:after {
position: absolute;
content: ' ';
top: 0px;
left: 50%;
transform: translateX(-50%);
width: 35px;
height: 2px;
background-color: #fff;
}
.data__desc p {
font-size: 18px;
line-height: 1.64;
color: #fff;
text-align: center;
font-weight: 800;
}
* {
box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data__wrap">
<div class="data__item">
<p class="data__count" data-progress-value="8">8</p>
<div class="data__desc">
<p>title 1</p>
</div>
</div>
<div class="data__item">
<p class="data__count" data-progress-value="127">127</p>
<div class="data__desc">
<p>title 2</p>
</div>
</div>
<div class="data__item">
<p class="data__count" data-progress-value="200">200</p>
<div class="data__desc">
<p>title 3</p>
</div>
</div>
<div class="data__item">
<p class="data__count" data-progress-value="200000">200,000</p>
<div class="data__desc">
<p>title 4</p>
</div>
</div>
</div>
Ответы (1 шт):
Автор решения: Bear Vorkuta
→ Ссылка
Замените "$1 " на "$1,"
$value.text(`${val.toFixed(0).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1,")} `)
$(document).ready(function() {
function loading() {
$('.data__item').each(function() {
const $this = $(this);
const $value = $this.find('.data__count');
const value = $this.find('.data__count').data('progress-value');
$({
value: 0
}).animate({
value,
}, {
duration: 1000,
step: function load_animate(val) {
$value.text(`${val.toFixed(0).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, "$1,")} `);
},
});
});
}
loading();
})
.data {
background-repeat: no-repeat;
background-size: cover;
padding-top: 65px;
}
.data__wrap {
display: flex;
flex-wrap: wrap;
margin: 0 -20px;
}
.data__item {
width: calc(25% - 40px);
margin: 0 20px;
margin-bottom: 80px;
}
.data__item:last-child .data__desc {
max-width: 195px;
}
.data__count {
font-size: 30px;
line-height: 1.3;
color: #68bec4;
text-align: center;
padding-bottom: 20px;
font-weight: 800;
}
.data__desc {
position: relative;
max-width: 130px;
padding-top: 30px;
margin: 0 auto;
}
.data__desc:after {
position: absolute;
content: ' ';
top: 0px;
left: 50%;
transform: translateX(-50%);
width: 35px;
height: 2px;
background-color: #fff;
}
.data__desc p {
font-size: 18px;
line-height: 1.64;
color: #fff;
text-align: center;
font-weight: 800;
}
* {
box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data__wrap">
<div class="data__item">
<p class="data__count" data-progress-value="8">8</p>
<div class="data__desc">
<p>title 1</p>
</div>
</div>
<div class="data__item">
<p class="data__count" data-progress-value="127">127</p>
<div class="data__desc">
<p>title 2</p>
</div>
</div>
<div class="data__item">
<p class="data__count" data-progress-value="200">200</p>
<div class="data__desc">
<p>title 3</p>
</div>
</div>
<div class="data__item">
<p class="data__count" data-progress-value="200000">200,000</p>
<div class="data__desc">
<p>title 4</p>
</div>
</div>
</div>