jQuery

【jQuery】数字をカウントアップして表示させるコード【コピペ】

jQueryを使って数字のカウントアップを再現します。

0から数字が増えていって、指定の数字なればストップする動きです。

 

よくあるのが、企業のリクルートページとかで、「数字で見る」的なページに使われているイメージです。

jQueryで簡単に再現できるので、忘備録として残しておきたいと思います。

 

jQueryでカウントアップ表現を実装する方法

See the Pen
jQuery 文字カウントアップ
by kei (@kei_01011)
on CodePen.

サンプルですが、このように0からカウントアップしていって、設定しておいた数字でストップします。

 

    <p class="count" data-num="634">0</p>

634までカウントアップします。

data-num属性に数字を指定し、

以下のjQueryをコピペするだけで実装できます。

 

$(function(){
    var countElm = $('.count'),
    countSpeed = 10;
 
    countElm.each(function(){
        var self = $(this),
        countMax = self.attr('data-num'),
        thisCount = self.text(),
        countTimer;
 
        function timer(){
            countTimer = setInterval(function(){
                var countNext = thisCount++;
                self.text(countNext);
 
                if(countNext == countMax){
                    clearInterval(countTimer);
                }
            },countSpeed);
        }
        timer();
    });
 
});