各メソッドを使用して番号計算を実施

ブランドサイト用のアニメーションのカウントコードの解析
1)計算方法1

<!-- html -->
<div>
  <ul>
    <li class="number">99</li>
  </ul>
</div>

<!-- https://jsfiddle.net/woorim0ju/grq7ko1f/1/ -->

// JS
$(function() {
		  var cnt0 = 0;

		  counterFn();

		  function counterFn() {

		    id0 = setInterval(count0Fn, 100);
            		//함수를 실행

		    function count0Fn() {
		      cnt0++;
		      if (cnt0 > 99) {
		        clearInterval(id0);
                // 함수를 종료
		      } else {
		        $(".number").text(cnt0);
		      }
		    }
		  }
		});

//https://jsfiddle.net/woorim0ju/grq7ko1f/1/

1-1)

setInterval関数:

を使用して一定の時間間隔でタスクを実行

clearInterval関数:clearIntervalを使用してsetInterval実行を終了
実行を停止していないすべての指定されたタスクが実行されます.
次のタスクスケジュールの停止

2)計算方法2

<!-- html -->

<section id="counter-stats" class="wow fadeInRight" data-wow-duration="1.4s">
	<div class="container">
		<div class="row">

			<div class="col-lg-3 stats">
				<i class="fa fa-code" aria-hidden="true"></i>
				<div class="counting" data-count="900000">0</div>
				<h5>Lines of code</h5>
			</div>

			<div class="col-lg-3 stats">
				<i class="fa fa-check" aria-hidden="true"></i>
				<div class="counting" data-count="280">0</div>
				<h5>Projects done</h5>
			</div>

			<div class="col-lg-3 stats">
				<i class="fa fa-user" aria-hidden="true"></i>
				<div class="counting" data-count="75">0</div>
				<h5>Happy clients</h5>
			</div>

			<div class="col-lg-3 stats">
				<i class="fa fa-coffee" aria-hidden="true"></i>
				<div class="counting" data-count="999">0</div>
				<h5>Cups of coffee</h5>
			</div>


		</div>
		<!-- end row -->
	</div>
	<!-- end container -->

</section>
<!-- https://codepen.io/shvvffle/pen/JRrLqG -->

//JS

$('.counting').each(function() {//counting 클래스에 이벤트 발생(페이지 로드와 동시에)
  var $this = $(this),
      countTo = $this.attr('data-count'); //data-count의 속성값 불러오기
  
  var countObj = {
  		countNum: $this.text()
  } // countNum의 text의 값은 0
  

  $(countObj).animate({countNum: countTo},{
						//countTo의 값을 담은 변수(90000, 280, 75, 999)
    duration: 3000, //동작이 완료될 때까지 걸리는 시간
    easing:'linear', //동작이 나타나는 방법
    step: function() { //동작 실행
      $this.text(Math.floor(this.countNum)); //정수값으로 출력되는 함수(Math함수)
    },
    complete: function() { //동작 완료
      $this.text(this.countNum);
    }

  });  

});

//https://codepen.io/shvvffle/pen/JRrLqG

2-1)

each():配列またはオブジェクト要素をチェックする方法

countTo変数を使用してdata-count値

を受け入れる

Math.lower関数を使用して整数

のみを出力
カウントコード解析内容
カウント方法はいくつかありますが、上記の2つの例でカウント操作について説明しました.コードを適用する場合、実際の操作が正常かどうかは、ブランドサイトを作成する際に判断する必要がある場合があります.
追加)

の2回目のクエリanimateの関数タイプ

AttributeTypeDescriptionasingString現在のアニメーションのゆったりした設定値が表示されます.ElemDOM Element現在のアニメーションのターゲット要素.(jQueryパッケージ以外の純粋なDOM要素)endNumberアニメーション終了時の値.NowNumberアニメーションの再生中の現在の値.オプションsObject設定のオプションが表示されます.posNumber加速時に使用する速度を表示します.0～1の値を出力します.propsStringは、現在再生されているcssのプロパティ値を表示します.上等または左等.startNumberアニメーションの開始値が表示されます.UnitStringアニメーションの再生単位を表示します.例えばpx、emなど.