javascript基礎 特定の数値までのカウントアップを実装する方法 – How to implement a count-up to the target num.

どうもこんばんは。今回のtipsは【javascript基礎 特定の数値までのカウントアップを実装する方法】です。基礎編という事でjavascript版とjQuery版をのせておきます。動作に関しましてはデモをお確認いただければ幸いです。

javascript

HTMLはjavascript、jQueryともに共通です。

HTML

<p id="cup"></p>

javascriptの場合

var num = 0;
var tgt = 500;
var speed = 10;
setInterval(function(){
if(num <= tgt){
	document.getElementById("cup").innerText = num;
	num++;
}
},speed);

jQueryの場合

var num = 0;
var tgt = 500;
var speed = 10;
setInterval(function(){
if(num <= tgt){
	$(‘#cup’).html(num);
	$(‘#bar span’).css({‘width’:num});
	num++;
}
},speed);

設定

num	カウント開始時の数値
tgt	カウント終了の数値
speed	カウントのスピード

以上になります。