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 ); } }
関連記事
-
-
formのtextareaに文字を入力した内容をリアルタイムプレビューする方法
textarea内に書いた内容をリアルタイムでプレビューする機能が必要になった。 ...
-
-
jQueryの画像スライダー用プラグイン「slick」の使い方
jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...
-
-
jQueryのloadメソッドでファイル(ページ)を呼び出す
サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...
-
-
jQueryでUNIXタイムスタンプの取得
jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...
-
-
「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法
slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...