[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>
시점에 따른 이벤트
document.querySelectorAll('[data-counter]').forEach(function (el) {
/* 카운트 끝났을 때 */
el.addEventListener('counter.end', function (e) {
console.log(e.target, 'counter end')
})
})
Component 호출(feat. 비동기)
const counterEl = document.querySelector('[data-counter]');
const counter = new SKY.Counter(counterEl);
카운트 시작
counter.init();