[Javascript/jQuery] 숫자가 0부터 증가하는 애니메이션 넣기

만약 1500이라는 숫자를 나타낼 때 0부터 숫자가 올라가는 모션을 넣어주고싶을때가 있다.

어려울거라고만 생각하고 찾아볼 생각도 안했는데...

생각보다 엄청 간단하다!

 

See the Pen eYBPxZw by merorii (@merorii) on CodePen.

 

 

 

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

function numberWithCommas(x) {
    return x.toLoaclString();
}

우선 편하게 세자리마다 숫자를 찍어주는 함수를 만들어두고 사용하자 :)

1. 자연수

먼저 자연수만 생각하는 케이스는 아래처럼

num에 소수점 아래로는 버리는 함수인 Math.floor를 사용해주면 된다.

$({ val : 0/*시작숫자*/ }).animate({ val : 1500/*종료숫자*/ }, {
  duration: 1500,
  step: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".count_num").text(num);
  },
  complete: function() {
    var num = numberWithCommas(Math.floor(this.val));
    $(".count_num").text(num);
  }
});

 

2. 소수 (첫째자리까지)

그리고 자연수가 아니라 소수점까지 생각해주고 싶다면 Math.floor함수를 지우면 되는데 이렇게 되면

열몇자리까지 주루루루룩 나와서 당황스럽다..!

이럴때는 toFixed를 사용해서 나타내고싶은 자리수까지만 나타내줄 수 있다!

$({ val : 0 /*시작숫자*/ }).animate({ val : 1.5 /*종료숫자*/ }, {
    duration: 1000,	
    step: function() {
        var num = numberWithCommas(this.val.toFixed(1));
        $(".count_num3").text(num);
    },
    complete: function() {
        var num = numberWithCommas(this.val.toFixed(1));
        $(".count_num3").text(num);
    }
});

 

jQuery안쓰고 싶지만.. javascript로 바꿀 용기가 안나니까 패쓰! ㅎㅎㅎㅎ