【jQuery】数字のカウントアップを実装する方法を解説します

jQueryを使って、数字がカウントアップ/カウントダウンする仕組みを作りたいと思い、jQueryで作ってみました！

ソースコード

早速完成品がこちらになります。

function countUp(start_val, end_val, target){
  var elm = $(target);
  var interval = parseInt((end_val - start_val) / 6);
  var count_speed = 150; 
  var this_count = start_val;

  //intervalが0だと無限ループするので
  if (interval == 0) {
  interval = 1;
}
  
  var count_timer = setInterval(function(){
    elm.text(this_count);
    this_count += interval;
    if (this_count >= end_val) {
      elm.text(end_val);
      clearInterval();
    }
  }, count_speed);
}

• start_val：カウント開始する値
• end_val：カウントを終了させる値
• target：カウントを行う要素のセレクタ(.targetなど)

解説

3行目のintervalはstart_valからend_valまでの幅を6で割っています。つまり、6回カウントをするように設定しています。ここは定数でももちろんいいのですが、start_valからend_valまでの幅が大きい場合、カウントが終わるまでの時間に差が出てしまいます。

例えば、1から10000までと1から100までではカウントが終わるまで100倍の差になってしまうのです。そのため、調整しています。

カウントスピードは150(ms)に設定し、setIntervalでタイマーが動くたびにthis_countがintervalずつ数字が増えていくようにしています。そしてthis_countがend_valと同じになるかそれ以上になったら、end_valを表示してタイマーを終了します。

補足

今回はカウントアップの場合でしたが、end_val – start_valがマイナスになる場合はカウントダウンとなります。その場合、intervalの符号がプラスの場合はthis_count >= end_valで終了、intervalの符号がマイナスの場合はthis_count <= end_valで終了、と場合分けを行うことでカウントダウンとカウントアップを両方実装することが出来ます。