>source

플러그인이 있거나 뭔가 도움이 될 수 있다면 알파인 js를 사용하여 애니메이션 숫자 카운터를 만들고 싶습니다.

코드 :

<div id="counter">Counter: <b counter="0">0</b></div>
function update_users_count() {
    $('#counter b').animate({
        counter: 25000
    }, {
        duration: 6000,
        easing: 'swing',
        step: function(now) {
            $(this).text(Math.ceil(now));
        },
        complete: update_users_count
    });
};
update_users_count();

내가하고 싶은 일의 예 :

  • 답변 # 1

    <!DOCTYPE html>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script><html>
    <body>
        <div x-data="{ current: 0, target: 50, time: 1000}" x-init="() => {
            start = current; 
            steps = time / (target - start)  
            const handle = setInterval(() => {
                if(current < target) 
                    current += Math.round((target - start) / steps)
                else {
                    clearInterval(handle);
                    current = target
                }   
                }, time/steps)
        }">
                 <div class="card"x-text="current">
        </div>
    </body>
    </html>
    
    

관련 자료

  • 이전 포인터 C ++ 사용에 대해 확실하지 않음
  • 다음 java - 확장 클래스에 대한 계산을 구현하는 좋은 방법은 무엇입니까?