JQuery
[JQuery] 숫자 0부터 특정수까지 증가하는 애니메이션 넣기
chsr
2022. 5. 18. 11:12
728x90
반응형
■ JQuery 숫자 0부터 특정수까지 증가하는 애니메이션 넣기
예를 들어 특정 수 100 이라는 숫자를 나타낼 때
0부터 100까지 숫자가 올라가는 모션을 넣어주고 싶을 때 사용
(따로 라이브러리 js 필요없음)
■ 사용법
<span class="target_cnt"></span>
<script type="text/javascript">
// $({ val : 시작숫자 }).animate({ val : 종료숫자 }, {
$({ val : 0 }).animate({ val : 100 }, {
duration: 1500,
step: function() {
var num = numberWithCommas(Math.floor(this.val));
$(".target_cnt").text(num);
},
complete: function() {
var num = numberWithCommas(Math.floor(this.val));
$(".target_cnt").text(num);
}
});
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>
■ 참고
소수점까지 나타내고 싶다면 toFixed() 사용하여 나타내고 싶은 자리수까지 나타낼 수 있음
var num = numberWithCommas(this.val.toFixed(1));
728x90
반응형