제작중 사이트의 데이터 값에 000자리 수 마다컴마(,)를 넣고 싶어요
본문
위 사이트를 제작중인데요
위 이미지의 숫자를 천자리 마다,를 넣고 싶어요
아래는 해당 부분의 소스에요
능력자 분들 부탁좀 드립니다~
<section id="facts" class="facts">
<div class="parallax-overlay">
<div class="container">
<div class="row number-counters">
<div class="sec-title text-center mb50 wow rubberBand animated" data-wow-duration="1000ms">
<h2>Some Fun Facts</h2>
<div class="devider"><i class="fa fa-heart-o fa-lg"></i></div>
</div>
<!-- first count item -->
<div class="col-md-3 col-sm-6 col-xs-12 text-center wow fadeInUp animated" data-wow-duration="500ms">
<div class="counters-item">
<i class="fa fa-clock-o fa-3x"><img src="/img_up/shop_pds/rebobee/design/app_img/nn3.png" style="margin-top: 30%;"></i>
<strong data-to="195943700000">0</strong>
<!-- Set Your Number here. i,e. data-to="195943700000" -->
<p>총 자금 배분완료</p>
</div>
</div>
</div>
</div>
</div>
</section>
답변 5
해당 소스 내역만으론 알 수 없습니다.
소스를 보니 태그의 data-to 값을 javascript에서 읽어들여 다시 가공하여 뿌리고 있는듯 한데
해당 뿌리는 부분에서 수정하셔야 합니다.
php에서 처리해서 보여 주실려면
number_format() 함수를 사용하세요.
<strong data-to="195943700000">0</strong>
위 data-to 속성은 CSS에서 데이타를 쓰려고 새로 정의된 속성이에요.
195943700000 >>> 이 숫자부분 자체를 원래부터 콤마를 찍어서 써줘야 해요.
숫자가 가변값일테니 그것을 출력하는 PHP 소스부분을 찾아서 그부분을 number_format( ) 함수로 처리해주면 되요.
js 파일인데
아래 부분이네요
"use strict";
$(".number-counters").appear(function () {
$(".number-counters [data-to]").each(function () {
var e = $(this).attr("data-to");
$(this).delay(6e3).countTo({
from: 50,
to: e,
speed: 3e3,
refreshInterval: 50
})
})
});
아래와 같은 예제가 있네요.
$('.workers').countTo({
from: 0,
to: 18000,
speed: 1500,
formatter: function (value, options) {
value = value.toFixed(options.decimals);
value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return value;
}
});
님의 코드에 적용해본다면 아래와 같은데 참고하세요.
"use strict";
$(".number-counters").appear(function () {
$(".number-counters [data-to]").each(
function () {
var e = $(this).attr("data-to");
$(this).delay(6e3).countTo({
from: 50,
to: e,
speed: 3e3,
refreshInterval: 50, // 콤마 찍고
formatter: function (value, options) { // >> 추가하고
value = value.toFixed(options.decimals);
value = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return value;
}
})
}
)
});