勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptで数値のカウントアップ及びカウントダウン

   2022/01/11  jQuery JavaScript

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 JavaScript

  関連記事

jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法
jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法

jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...

「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...

jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法

同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...

FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード
FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...