About
通常のカウントアップの方法だと、カウントアップさせる数値が大きい程、処理完了まで時間がかかってしまう問題がありました。それに対応したのが本スクリプトです。
動作にはjQueryが必要です。
Example
使用例
同時使用もOK
Download
あまり汎用性は無いですがプラグイン化しました。
How to use
1. jsの読み込み
headタグにjsの読み込みの記述をします。同時にjQueryの読み込みもします。
<script src="js/jquery.min.js"></script> <script src="js/jquery.number_counter.js"></script>
2. スクリプトの記述
下記の要領でスクリプトを記述します。
<script>
var options = {
'dom_cnt': '.counter', // カウント対象の要素
'dom_result': '#result', // 結果表示させる要素
'dom_clear': '#clear', // クリアするためのボタン
'time': '600', // 何ミリ秒かけてアニメーションさせるか
'default_num': '0' // 数値の初期値
};
$.fn.counter(options);
</script>
3. htmlの記述
下記のような感じです。
<form>
<dl>
<dt>結果表示</dt>
<dd id="result">0</dd>
<dt>数字を選択してください</dt>
<dd><label for="value"><input type="radio" id="value" class="counter" name="num" value="25">25</label></dd>
<dd><label for="value2"><input type="radio" id="value2" class="counter" name="num" value="6402">6402</label></dd>
<dd><label for="value3"><input type="radio" id="value3" class="counter" name="num" value="432800">432800</label></dd>
<dt>初期化する</dt>
<dd id="clear">clear</dd>
</dl>
</form>
Attention
今のところ下記のような問題があります。。
- 値の合計を求める処理には対応していません
Information
Twitter：@naoyago