勉強したことのメモ

webプログラマが勉強したことのメモ。

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, JavaScript

  関連記事

JavaScriptで文字列から数値へ変換時の注意

JavaScriptで文字列から数値へ変換時に思った挙動と異なることがあった。具 ...

jQueryで新しく追加した要素に対してイベントがきかない場合の対応

jQueryで新たに追加した要素に対して、 clickイベントを使いたかったけど ...

leaflet.jsとosmでマップ表示及びマーカー設置

GoogleMapAPIを用いたマップ及びマーカー表示にクレジットカード登録が必 ...

異なる文字コード間でform送信する

formの送り手がUTF-8で受け手がEUC-JP、 なんとかしてjavascr ...

HTML、javascriptソースの暗号化

サーバーサイドはソースを見られないけどクライアントサイドはソースを見られるので、 ...

jQueryで画像(タグ内)のsrc情報を取得する場合

すぐに出てこなかったのでメモ。 $('#test').attr('src'); ...

leaflet.jsとOSMで現在地の取得

leaflet.jsとOpenStreetMapで現在位置を取得しマップ上にマー ...

Chart.jsで横スクロール可能なグラフを表示

Chart.jsで折れ線グラフを表示するページがあった。過去1年分のデータをグラ ...

Ajaxでボタンとテキストボックス操作

ボタンを押して「https://aaa/bbb/ajax.php」からの 返答を ...

submit関連のjQuery2

<?php error_reporting(E_ALL & ~E_ ...