Blog

jQueryで金額をカウントアップする方法

2014.06.20Cat:javascript jQuery デザイナー

ショッピングサイトにおいて、

各商品のオプションや数量を変更したときに、

合計金額や内訳を表示数方法として、

変更前から変更後の価格に徐々に変化しているようにアニメーションさせる方法があります。

 

私も今回携わった案件で、その方法が求められ、実際に組んでみることになりましたので、

その方法をご紹介したいと思います。

 

↓こちらがデモです

DEMO

 

方法

その1:変更前と変更後の価格を取得する

まず、変更前の価格と、選択項目から選択された値を取得します。

チェックボックスの場合は、指定した範囲内のすべてのチェックされたチェックボックを検索し、

そのチェックボックスと同じ<label>内の指定したクラスのテキストを変更後の価格として取得しています。

 

セレクトボックスの場合は、optionにdata-priceという属性をつけ、その値を変更後の価格として取得するようにしました。

チェックボックスの場合も、テキストからではなく、チェックボックスにdata-price属性をつけて取得する方がわかりやすいかもしれません。

 

また、今回は価格にカンマがついているので、カンマを処理するための関数を使っています。

関数は↓コチラを参考にさせていただきました。

岡田治ブログ: javascriptで数値を3桁区切りで表示する方法

 

その2:カウントアップのアニメーションを実行する

それではいよいよ、先ほど取得した価格をもとに、アニメーションを実装します。

基本的な流れは、

変更前と変更後の価格が同じになるまで、setInterval()で徐々に値を増減させるというものです。

変更前と変更後で価格が同じになったら、clearInterval()でアニメーションを停止させます。

計算方法は、インクリメント(priceOptions++)やデクリメント(priceOptions–)で1ずつ変化させてもいいのですが、

変更前と変更後の価格の差が1000を超えてくると、アニメーション終了までにとても時間がかかってしまうので、

差が大きいときは大きく増減させ、差が小さいときは少しずつ増減させられるように、

今回は反比例を使うようにしました。

変更の差額の範囲がある程度決まっている場合は、if分を使って、桁数に応じて増減させる数値を変化させる方法もいいかもしれません。

 

 JavaScript全文

 

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ