なんていうんでしょうか、こんな感じに条件を選択すると数字がカウントアップ(ダウン)する動きを作りたくてスクリプトを書きました。すごいニッチな内容ですが、勉強も兼ねてということで。。

デモ(jquery.number_counter.js)

ただ、この数字が動く処理が意外に面倒で、以下のような点に気を配りました。

普通に実装した場合

普通に実装すると、ループ処理の間に数字をカウントさせていって、目的の数字になったら処理を終わらせる…みたいな処理の内容になると思います。ただ、その場合数字が大きいと完了までえらく時間がかかってしまうという難点が。

こんな感じ

改良版

どんなに数字の差があっても一定の時間で処理を終わらせるようにします。重要なのは「var res = Math.floor((after – before) * time_cnt / max_time_cnt) + before;」の行です。

まず、「Math.floor((after – before) 」で数値の差を求めます。

「* time_cnt / max_time_cnt」で、残り時間の係数を求めることができるので、先程の数値に掛けます。これで残り時間に応じた数値の差を得ることができます。

これだけだと数値の差しか表示されないので、最後にbeforeの数値を足してあげればOKです。

var timer;

var time_cnt = 0;
var max_time_cnt = 100; // カウント回数、これが大きい程時間をかけてカウントアップさせる
var deley = 10; // timerの実行間隔

var after = 5431; // カウントアップ後の数値
var before = 100; // カウントアップ前の数値

render();

var render = function() {
  time_cnt++;
  if (time_cnt <= max_time_cnt) {
    var res = Math.floor((after - before) * time_cnt / max_time_cnt) + before;

    // 残りの演出時間で表示する値を取得
    $('#result').html(res);

    timer = setTimeout(function() { render() }, deley);
  } else {
    clearTimeout(timer);
    timer = null;
    time_cnt = 0;
  }
};

…プラグイン化した意味はあるのだろうか。たぶん無いな。

Tweet