아래와 같이 두가지 방법을 혼합하여 숫자(금액)을 표시를 해주고 싶은데
단순하게 혼합하니까 애러가 Nan 이 뜨거나 아예 안보이더군요.
고수님들 도와주세요~
php로 숫자만 콤마찍어 출력하는 방법
Copy
<div class="wowcount">
<?php
$value = 39840;
$money = number_format($value);
echo $money;
?> 원
</div>스크립트로 지정된 선택자에 들어있는 숫자를 애니메이션 시키는것.
Copy
<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개 / 댓글 3개
채택된 답변
+20 포인트
2018-04-12 (목) 22:33:49
찾으시는듯하여
여기에 샘플 만들어놨습니다.
Copy
<?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>답변에 대한 댓글 1개
망이망소이
2018-04-13 (금) 16:41:57
2018-04-12 (목) 14:28:23
NaN을 유발하는 코드는
위에 사용하신 내용중에서
Copy
<div class="wowcount">
<?php
$value = 39840;
$money = number_format($value);
echo $money;
?>
원
</div>입니다.
위의 코드가 최소한 숫자로만 인식되도록 변경해야 합니다.
Copy
<div >
<span class="wowcount">
<?php
$value = 39840;
// $money = number_format($value); // 숫자를 ,를찍으면 문자가 됩니다.
if ($value >=0)
echo $value;
else
echo "0";
?>
</span>
원
</div>금액표기는 그다음 문제라고 봐야합니다.
답변에 대한 댓글 2개
망이망소이
2018-04-12 (목) 19:18:50
답변 감사드립니다.
둘다 써보면 되긴 합니다.
문제는 위에거는 콤마가 들어간 숫자만 나오고
아랫것은 숫자가 애니메이션되면서 나오는데 콤마가 안찍혀서
이 두개를 적절히 혼합해서
숫자가 0부터 애니메이션효과로 숫자가 지정한 숫자로 바뀌면서
콤마까지 찍히게 하려는 겁니다^^
[code]
<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>
[/code]
요렇게 쓰고 싶은데 애러의 원인을 못찾고 있는거죠~
둘다 써보면 되긴 합니다.
문제는 위에거는 콤마가 들어간 숫자만 나오고
아랫것은 숫자가 애니메이션되면서 나오는데 콤마가 안찍혀서
이 두개를 적절히 혼합해서
숫자가 0부터 애니메이션효과로 숫자가 지정한 숫자로 바뀌면서
콤마까지 찍히게 하려는 겁니다^^
[code]
<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>
[/code]
요렇게 쓰고 싶은데 애러의 원인을 못찾고 있는거죠~
2018-04-12 (목) 19:29:28
자바스크립트로 콤마찍는걸
$(this).text(여기에 적용(Math....));
로 하시고
Counter에서는 콤마를 제거하는 parseInt 를 적용하면 해결 될겁니다
찾아보시면 많이 나옵니다
$(this).text(여기에 적용(Math....));
로 하시고
Counter에서는 콤마를 제거하는 parseInt 를 적용하면 해결 될겁니다
찾아보시면 많이 나옵니다
답변을 작성하려면 로그인이 필요합니다.
또 한번 배우면서 존경하는 마음을 표합니다. 감사합니다.