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

13411 ワード

会社のウェブサイトはついに更新しました!!
あの変なページを見なくてもいいのですが、こんな忙しい時に、なんとページを変えてしまいました.
忙しい!
デザイン案から見ると、アニメがたくさん実装されているサイトなので、自動番号カウントコードを調べました.

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)
各文、各文を実行します.発生イベントをカウントします.
.contingという名前の子供を変数$this$thisの属性「data-count」として指定する変数countTo
        $({ 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값이 된다
           }
        });
    });
});
countNumという名前のキーに$thisの値をテキスト形式で表示します.すなわち、countToをアニメーションで表示します.カウントのプロパティ「data-count」のプロパティ値をtextとして表示します.
どうしよう.3秒以内に、固定、整数、結果テキストはcountnum(countToをアニメーション化!)

Result



💡 Study


each:文章/forを繰り返し、読みやすさがよく、オブジェクトタイプを扱いやすいため、よく使われています
Math.flower:整数は数字を表す(四捨五入X)
::Property(キー)に値(値)を割り当てる
var=,:一度に複数の変数を設定する