[JavaScript/jQuery] 숫자 카운트 효과

 - 소스코드

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">

        $(function () {
            numCountComma();
            numCount();
        });

        //숫자만
        function numCount() {
            $('.numCount').text($('input[id=num]').val()) //input에 입력한 값 가져오기(테스트용으로 추가)
            $('.numCount').each(function () {
                var t = $(this);
                $({ Counter: 0 }).delay(200).animate({ Counter: t.text().replace(/,/g, "") }, {
                    duration: 1200,
                    easing: 'swing',
                    step: function () {
                        t.text(Math.ceil(this.Counter));
                    },
                    complete: function () {
                        t.text(Math.ceil(this.Counter));
                    }
                });
            });
        }

        //컴마 포함
        function numCountComma() {
            $('.numCountComma').text($('input[id=num]').val()) //input에 입력한 값 가져오기(테스트용으로 추가)
            $('.numCountComma').each(function () {
                var t = $(this);
                $({ Counter: 0 }).delay(200).animate({ Counter: t.text().replace(/,/g, "") }, {
                    duration: 1200,
                    easing: 'swing',
                    step: function () {
                        t.text(numComma(Math.ceil(this.Counter)));
                    },
                    complete: function () {
                        t.text(numComma(Math.ceil(this.Counter)));
                    }
                });
            });
            function numComma(x) { //컴마 정규식
                return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            }
        }
        function reset() { //클릭이벤트(테스트용으로 추가)
            numCountComma();
            numCount();
        }
    
    </script>

    <input type="number" id="num" value="32131232131"></input><button type="button" onclick="reset()">button</button></br>  
    컴마 정규식 미포함 : <label class="numCount">32131232131</label></br>
    컴마 정규식 포함 : <label class="numCountComma">32131232131</label>

 

 - 실행결과

컴마 정규식 미포함 : 32131232131
컴마 정규식 포함 : 32131232131