Counter

[data-counter]

0

0

<!-- data-counter: 도착 수치 -->
<!-- data-init-number: 시작 수치 -->
<!-- data-duration: 걸리는 시간 -->
<!-- data-comma: 세자릿수 comma 표기 여부 -->
<p data-counter="4014" data-init-number="200" data-duration="2000" data-comma="true">0</p>
<p data-counter="4014" data-init-number="20000" data-duration="2000">0</p>

Events

시점에 따른 이벤트

document.querySelectorAll('[data-counter]').forEach(function (el) {
    /* 카운트 끝났을 때 */
    el.addEventListener('counter.end', function (e) {
        console.log(e.target, 'counter end')
    })
})

Method

Component 호출(feat. 비동기)

const counterEl = document.querySelector('[data-counter]');
const counter = new SKY.Counter(counterEl);

카운트 시작

counter.init();