jQueryでの足し算引き算-カウントアップダウン付き

stopwatch closeup

今回は足し算引き算にプラスα要素でカタカタとカウントダウンしながら計算する方法をご紹介します。

もともとはライフネット生命がやっている保険代金の計算方式です。

あんな感じで計算した時動きがある感じを出してみたいと思ってやってみました。

これも探しましたがこれといったものもなくヒント的な要素だけで作ってみました。


スポンサーリンク


jQueryでの計算記述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
   $(function(){
   	function sumNumbers() {
   		var fields = $(':input').serializeArray();
   		$('#results').empty();
   		var sum = 0;
   		$.each(fields, function(i, field){
   			sum += parseInt(field.value);
   		});
   		return sum;
    }
    function countUpDown() {
    	var n = parseInt($('#results').text());
    	var sum = sumNumbers ();
    	if(n < sum){
    		n += 10;
    		$('#results').text(n);
    		setTimeout(countUpDown, 10);
    	} else if(n > sum) {
        	n -= 10;
        	$('#results').text(n);
        	setTimeout(countUpDown, 10);
        } else {
        	$('#results').css('color','#ff0000');
        	$('#results').text(sum);
        }
    }
 
    $(":checkbox, :radio").click(countUpDown);
    $("select").change(countUpDown);
    countUpDown();
 
  });
</script>

.serializeArray()なんて便利な関数があったものです。これですべての要素を取り出して配列にしてくれるのでかなり記述が短縮できました。

デモサイトにてご確認くださいませ

デモサイト

Pocket
LINEで送る


スポンサーリンク

コチラの記事もどうぞ!
You can leave a response, or trackback from your own site.

コメントをお寄せ下さい

Subscribe to RSS Feed Follow me on Twitter!