JSはショッピングカート内の商品の合計金額の計算を実現します

JSはショッピングカート内の商品の合計金額の計算を実現します

JSはショッピングカート内の商品の合計金額を計算して参考とします。具体的な内容は以下のとおりです。

質問の要件:

ショッピングカート内の複数の商品に関する情報(商品名、単価、数量など)があり、ショッピングカート内の商品の合計金額が計算されます。

具体的なアイデア:

商品情報は、商品オブジェクトを作成することで取得されます。複数の商品の合計は、商品を配置する配列を作成することで実現されます。次に、配列を走査して指定された属性を読み取ることで価格が計算されます。

特定のコード:

<script type="text/javascript">
 // 合計価格変数 var sum = 0;
 // 商品オブジェクト関数 Goods(name,price,amount){
 this.name = 名前;
 this.price = 価格;
 this.amount = 金額;
 // this.add = fun();
  }
 //製品インスタンスを定義して宣言します var goods1 = new Goods("Pen",100,1);
 var goods2 = new Goods("ペーパータオル",10,1);
 var goods3 = new Goods("ワークブック",100,2);
  
 // 合計価格を計算する関数を作成する function totalPrice(){
 // オブジェクトを配列に入れる var arr = new Array(goods1,goods2,goods3);
 // for(var i in arr){ を走査して各製品の価格を追加します。
  合計 = 合計 + (arr[i].price * arr[i].amount);
  };
  console.log(合計);
 };
  
 コンソールログ(商品1);
 コンソールログ(商品2);
 コンソールログ(goods3);
 合計価格();
</スクリプト>

実行結果:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • ショッピングカートの計算を実現する js メソッド

<<:  Linx awk入門チュートリアルの詳細な説明

>>:  MySQL 5.7.9 バージョンの sql_mode=only_full_group_by 問題を解決する

推薦する

calc() で全画面背景の固定幅コンテンツを実現

ここ数年、Web デザインには「全幅背景と固定幅コンテンツ」というトレンドが生まれています。このデザ...

vue3 再帰コンポーネントカプセル化の全プロセス記録

目次序文1. 再帰コンポーネント2. 右クリックメニューコンポーネント要約する序文今日、プロジェクト...

Vue 要素と Nuxt の使用に関するヒントを共有する

1. 要素時間選択提出フォーマット変換例えば 2018年9月7日金曜日 00:00:00 GMT+0...

TeamCenter12 にログインする際の 404/503 問題の解決方法

TeamCenter12はアカウントのパスワードを入力し、ログインをクリックすると、404または50...

MySql はコミットする必要がありますか?

MySQL が挿入などの操作を実行するときにコミットする必要があるかどうかは、ストレージ エンジン...

XHTML におけるタイトルタグと段落タグの使用に関する詳細な説明

XHTML 見出しの概要Word 文書を作成するときは、「第 1 章」、「1.2.1」などのタイトル...

Xampp サーバーで MySQL パスワードを変更する方法 (画像付き)

今日、PHP で作業しているときに、Xampp サーバーに付属の mysql データベースを使用する...

アダプティブ Web デザインを実現する方法に関する関連知識ポイントの要約

「アダプティブ Web デザイン」はどのように機能しますか?実はそれほど難しいことではありません。 ...

Linux (CentOS7) に Tomcat をインストールし、Tomcat をスタートアップ項目として設定します (tomcat8 を例に挙げます)

目次TomcatをインストールするTomcat 圧縮パッケージをダウンロードTomcatには3つの主...

JavaScript parseInt() と Number() の違いのケーススタディ

学習目標: parseInt() と Number() という 2 つの関数は、文字列をデータ型に変...

CSS 属性値 clear:right が機能しない理由の詳細

clear プロパティを使用してフロートをクリアすることはよくあることであり、clear プロパティ...

Linux に MySQL をインストールする方法 (yum とソース コードのコンパイル)

Linux に MySQL をインストールするには、yum インストールとソース コード コンパイ...

mysql 5.7.19 最新バイナリインストール

まず、公式ウェブサイト http://dev.mysql.com/downloads/mysql/ ...

Jmeterはデータベースプロセスダイアグラムに接続します

1. MySQL jdbc ドライバー (mysql-connector-java-5.1.28.j...

jsはreduceメソッドを使用してコードをよりエレガントにします

序文実際のプロジェクトでは、最も一般的な処理は計算とループロジックである可能性があります。配列でre...