금액 출력시 숫자효과 주고 콤마찍기
본문
아래와 같이 두가지 방법을 혼합하여 숫자(금액)을 표시를 해주고 싶은데
단순하게 혼합하니까 애러가 Nan 이 뜨거나 아예 안보이더군요.
고수님들 도와주세요~
php로 숫자만 콤마찍어 출력하는 방법
<div class="wowcount">
<?php
$value = 39840;
$money = number_format($value);
echo $money;
?> 원
</div>
스크립트로 지정된 선택자에 들어있는 숫자를 애니메이션 시키는것.
<div class="wowcount">39840</div>
<script>
// 0부터 카운트 애니메이션 시키는 스크립트
$('.wowcount').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
</script>
답변 2
찾으시는듯하여
여기에 샘플 만들어놨습니다.
<?php
$value = 30689;
$money = number_format($value);
echo $money;
?>
</b>
<div class="wowcount">
1234123
</div>
<script>
function ncomma(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
//카운트효과
$('.wowcount').each(function () {
$(this).prop('Counter',0).animate({
Counter: parseInt($(this).text())
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(ncomma(Math.ceil(now)));
}
});
});
</script>
와우 잘됩니다. ^^ 감사합니다.
또 한번 배우면서 존경하는 마음을 표합니다. 감사합니다.
NaN을 유발하는 코드는
위에 사용하신 내용중에서
<div class="wowcount">
<?php
$value = 39840;
$money = number_format($value);
echo $money;
?>
원
</div>
입니다.
위의 코드가 최소한 숫자로만 인식되도록 변경해야 합니다.
<div >
<span class="wowcount">
<?php
$value = 39840;
// $money = number_format($value); // 숫자를 ,를찍으면 문자가 됩니다.
if ($value >=0)
echo $value;
else
echo "0";
?>
</span>
원
</div>
금액표기는 그다음 문제라고 봐야합니다.
답변 감사드립니다.
둘다 써보면 되긴 합니다.
문제는 위에거는 콤마가 들어간 숫자만 나오고
아랫것은 숫자가 애니메이션되면서 나오는데 콤마가 안찍혀서
이 두개를 적절히 혼합해서
숫자가 0부터 애니메이션효과로 숫자가 지정한 숫자로 바뀌면서
콤마까지 찍히게 하려는 겁니다^^
<b class="wowcount">
<?php
$value = 30689;
$money = number_format($value);
echo $money;
?>
</b>
<script>
//카운트효과
$('.wowcount').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
</script>
요렇게 쓰고 싶은데 애러의 원인을 못찾고 있는거죠~
자바스크립트로 콤마찍는걸
$(this).text(여기에 적용(Math....));
로 하시고
Counter에서는 콤마를 제거하는 parseInt 를 적용하면 해결 될겁니다
찾아보시면 많이 나옵니다
답변을 작성하시기 전에 로그인 해주세요.