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 | カウントのスピード |
以上になります。