k01ken’s b10g

He110 W0r1d!

JavaScriptでタイマー機能を使って数字のカウントを見せる

開発環境は、Windows 7 Professional(32bit)

例えば、査定サイトで査定価格の金額を0円から査定価格までタイマーで動かして見せる動作を加えるとする。0円から査定価格の1/10ずつ増やしていって、査定価格に達したら、査定価格と切り替えてタイマーを破棄する。

JavaScript

$(function(){
	$('#satei').on('click',function(){
		var satei = 16800;
                var up = satei / 10;
		var timerId = setInterval(function(){
		var p = Number($('#price').text()) + up;
		if(p >= satei){
			$('#price').text(satei);
			clearInterval(timerId);
		}else{ 
			$('#price').text(p);
		}
		},10);
	});
});

HTML側

<div><span id="price">0</span></div>
<input type="button" id="satei" value="査定">

参考リンク
jQueryでsetIntervalを使って特定の間隔でfunction処理を繰り返し行う(タイマー処理)方法 | BlackFlag
[Javascript]setInterval関数で設定した定期処理を解除する « Codaholic