JavaScriptで数値のカウントアップ及びカウントダウン
2022/01/11
JavaScript(一部jQuery)で数値のカウントアップ及びカウントダウンを行いたい。また、カウントアップ及びカウントダウン自体の処理時間(開始~終了までの処理時間)もある程度調整できるようにしたい。以下に対応方法とサンプルページをメモ。
サンプル
https://taitan916.info/sample/count/
ソースコード
/*
start_num:開始時の値
end_num:終了時の値
area:値を描写する部分のID名
delay:実行時間をミリ秒で指定(数値が小さいほど実行時間が短くなる)
*/
function priceCount(start_num, end_num, area, delay){
if( start_num != end_num ) {
var count_num = start_num;
var timer = setInterval(function() {
if( start_num < end_num ) {
count_num = count_num + Math.round((end_num - count_num)/2);
} else {
count_num = count_num - Math.round((count_num - end_num)/2);
}
$('#' + area).html(count_num);
if( count_num == end_num ) {
clearInterval(timer);
}
}, delay );
}
}
関連記事
-
-
jQueryでjsonデータを処理(parseJSON)
他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...
-
-
jQueryで指定した可変(レスポンシブ)要素のposition / width / heightを取得する方法
jQueryで指定した要素のposition(leftやtop) / width ...
-
-
日付入力のテキストフォームにカレンダープラグインを導入
やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...
-
-
jQueryにて特定のIDが存在するかチェックし分岐処理する方法
jQueryにて特定のIDが存在するかチェックし分岐処理したいというケースがあっ ...
-
-
タブアンダー広告をjQueryで再現する方法
サイト内のリンクをクリックすると、新しいタブもしくはウィンドウで開く広告をちょい ...