デジタルカウントアニメーション

html

<div class="flex">
	<div class="col">
		<p class="count-num" data-count="777">0</p>
		<p>count 1</p>
	</div>
	<div class="col">
		<p class="count-num" data-count="555">0</p>
		<p>count 2</p>
	</div>
	<div class="col">
		<p class="count-num" data-count="333">0</p>
		<p>count 3</p>
	</div>
</div>

css

body {
	background: #40E0D0;
}

.flex {
	display: flex;
	justify-content: space-between;
	margin: 100px auto;
	width: 50%;
}

.count-num {
  text-align: center;
  font-size: 35px;
  font-weight: 700;
}

JS

$('.count-num').each(function() { // .count-num에 각각 적용
  var $this = $(this),
      countTo = $this.attr('data-count');
      // $this = 첫번째~세번째 .count-num
      // countTo = 첫번째~세번째 .count-num의 data-count 속성의 값(777,555,333)
  
  $({ countNum: $this.text()}).animate({
    countNum: countTo 
    // countNum: $this.text() = 0, countNum: countTo = 777, 555, 333
    // 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값이 된다
      //alert('finished');
    }
  });  
});

検査結果

📝新知

Math.floor()

は、与えられた数値と等しいまたは小さい整数の最大数の関数を返します.

小数を使用して、最も近い整数

var $this = $(this), countTo = $this.attr('data-count');

JavaScript変数の宣言時に複数の変数を同時に宣言する方法.

var a;  // 선언할때 초기화를 하지않으면 "undefined"값을 가진다
var b = 0;  // 선언과 동시에 초기화가 된다
var c, d; // 한 번에 여러 개의 변수를 함께 선언하는 방법

var e=0, f=0;  // 선언과 초기화를 동시에 설정가능
language = "JavaScript"  // 범위를 따로 지정하지 않으면 전역 변수로 취급

Jクエリのデジタルタイミングアニメーションを使用します.

各クラスにイベントを送信します.

私はまだどのように並ぶか分からないので、もう一度勉強しなければなりません.😤