숫자 증가하기, 카운팅, CountUp 플러그인 사용 - javascript

js - 플러그인 사용, 숫자 카운팅, 숫자 올라가기

---

0,1,2 ~ 999, 1000, 1001 과 같이 특정 숫자까지 카운트 되면서 올라가는 효과,
간단히 CountUp이라는 플러그인으로 적용 가능하다.

html

<p id="count1">{{ countNo("count1", count1no, count1time) }}</p>
<p id="count2">{{ countNo("count2", count2no, count2time) }}</p>

js(vue 2.0)

<script src="https://cdn.jsdelivr.net/npm/countup@1.8.2/dist/countUp.min.js"></script>
...
......
data: {
  // 카운트 되는 숫자
  count1no: 192830,
  count2no: 3944,
  
  // 각 숫자가 카운트 되는 시간
  count1time: 2, // 2초
  count2time: 1, // 1초
},
computed: {
  countNo() {
    // Tag 영역, 표시되는 숫자, 진행 시간
    return (id, maxno, maxtime) => {
      return this.countNoUp(id, maxno, maxtime)
    }
  }
},
methods: {
  countNoUp(id, maxNo, maxTime) {
    let cno = new CountUp(id, 0, maxNo, 0, maxTime);// Tag영역, 시작 숫자(여기선 0), 마지막 숫자, 소수점 자리(0 = 없음), 진행 시간(초)
    if (!cno.error) {
      cno.start();
    } else {
      console.error(cno.error);
    }
  }
}
......
...

끝.