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

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回の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 カウントのスピード

以上になります。