重複するeachを使用して自動番号カウントjsを実現

html

<section>
	<div class="row flex">
    	<div class="col">
          	<div class="counting" data-count="900000">0</div>
    	</div>
        <div class="col">
          	<div class="counting" data-count="280">0</div>
        </div>
        <div class="col">
          	<div class="counting" data-count="75">0</div>
        </div>
        <div class="col">
        	<div class="counting" data-count="999">0</div>
        </div>
  	</div>
</section>

css

.row.flex {
	display: flex;
	justify-content: space-between;
}
.col {
	width: 150px;
    height: 150px;
}
.col .counting {
	text-align: center;
	font-size: 35px;
	font-weight: 700;
}

js

$(function(){
	$('.counting').each(function() { // .counting에 각각 적용
      var $this = $(this),
      countTo = $this.attr('data-count');
      // $this = 첫번째~네번째 .counting
      // countTo = 첫번째~네번째 .counting의 data-count 속성의 값(90000,280,75,999)

        $({ countNum: $this.text()}).animate({
            countNum: countTo 
            // countNum: $this.text() = 0, countNum:countTo = 90000, 280, 75, 999
            // 0에서 countNum이 된다
          },
          {
            duration: 3000, // 애니메이션이 완료될때까지 걸리는 시간
            easing:'linear', // 애니메이션 효과 방식
            step: function() { // 움직임 각 스텝별로 실행될 함수
              $this.text(Math.floor(this.countNum));
              // Math.floor -> this.countNum의 값을 정수로 만들어준다
           },
            complete: function() { // 움직임이 멈춘 후 실행될 함수
              $this.text(this.countNum);
              // this.countNum이 $this의 text값이 된다
           }
        });
    });
});

Result

💡 Study