この記事の例では、ショッピングカートの加算と減算、価格計算を実装するためのjsの具体的なコードを共有しています。具体的な内容は次のとおりです。 実装されている主な機能:ショッピングカートの加算と減算、単品価格の計算、合計価格の計算。価格は小数点第2位まで切り上げられます。 <div class="content"> <div class="logo"> <img src="images/dd_logo.jpg"><span onclick="guan()">閉じる</span> </div> <div class="cartList" id="zong"> <ul> <li >21.90円</li> <li><input type="button" name="minus" value="-" onclick="jian()"><input type="text" name="amount" value="1" id="shang"><input type="button" name="plus" value="+" onclick="jia()"></li> <li>¥<input type="text" name="price" value="21.90" id="yiqian"></li> <li><p onclick="shou()">お気に入りに移動</p><p onclick="shan()">削除</p></li> </ul> <ul> <li >24.00円</li> <li><input type="button" name="minus" value="-" onclick="jian1()"><input type="text" name="amount" value="1" id="shang1"><input type="button" name="plus" value="+" onclick="jia1()"></li> <li>¥<input type="text" name="price" value="24.00"id="erqian" ></li> <li><p onclick="shan()">お気に入りに移動</p><p onclick="shan()">削除</p></li> </ul> <オル> <li id="合計価格" > 0.00</li> <li><span onclick="jie()">チェックアウト</span></li> </ol> </div> <h3 id="shijian">現在は:</h3> </div> 上記はHTMLページです 以下はJSスクリプトです var 価格 = 0.00; var 価格1 = 0.00; var 価格2 = 0.00; 関数 jian() { var i = parseInt(document.getElementById("shang").valueOf().value) - 1; もし (i <= 0) { 私 = 0; } document.getElementById("shang").valueOf().value = i; 価格1 = 21.90 * i; document.getElementById("yiqian").value=suan(price1); ゾン(); } 関数 jia() { var i = parseInt(document.getElementById("shang").valueOf().value) + 1; document.getElementById("shang").valueOf().value = i; 価格1 = 21.90 * i; document.getElementById("yiqian").value=suan(price1); ゾン(); } 関数jian1() { var i = parseInt(document.getElementById("shang1").valueOf().value) - 1; もし (i <= 0) { 私 = 0; } document.getElementById("shang1").valueOf().value = i; 価格2 = 24.00 * i; document.getElementById("erqian").value=suan(price2); ゾン(); } 関数 jia1() { var i = parseInt(document.getElementById("shang1").valueOf().value) + 1; document.getElementById("shang1").valueOf().value = i; 価格2 = 24.00 * i; document.getElementById("erqian").value=suan(price2); ゾン(); } 関数 suan(数値) { 価格 = 価格1 + 価格2; if (isNaN(数値)) { false を返します。 } 数値 = Math.round(数値 * 100) / 100; var s = number.toString(); var rs = s.indexOf("."); (rs < 0)の場合{ rs = s.長さ; s + = "."; } (s.length <= rs + 2)の間{ s + = "0"; } s を返します。 } 関数zong() { 価格 = 価格1 + 価格2; if (isNaN(価格)) { false を返します。 } 価格 = Math.round(価格 * 100) / 100; var s = price.toString(); var rs = s.indexOf("."); (rs < 0)の場合{ rs = s.長さ; s + = "."; } (s.length <= rs + 2)の間{ s + = "0"; } document.getElementById("totalPrice").innerHTML=s; } 最も基本的な方法が採用されており、初心者でも理解しやすく、特に知識が不足している人でも基本的に理解できます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL ストアド プロシージャを作成 (CREATE PROCEDURE) して呼び出す (CALL) 方法と、変数を作成 (DECLARE) して割り当てる (SET) 方法
>>: CentOS での Django プロジェクトのデプロイに関する詳細なチュートリアル
1. Tclスクリプトファイルcircle.tclコードコメント #シミュレーションに必要なプロパテ...
まず、 (1)MySQL 5.7にはデフォルトのパスワードがあるデフォルトのパスワードを見つける g...
1. 背景インターネット アプリケーションの急速な更新と反復という状況では、従来の手作業や単純なスク...
1. 遷移属性の理解1. transition 属性は、次の 4 つの遷移プロパティを設定するために...
インデックス拡張: InnoDB は、プライマリ キー列をそのインデックスに追加することで、各セカン...
目次予備作業バックエンド構築フロントエンドページダイレクトレンダリングsetTimeout ページン...
目次概要コンポーネントクラスの型定義を作成するジェネリック型を使用してPropsとStateを定義す...
以前、会社で小さな機能に取り組んでいたとき、特定の状況でデータがいくつあるかを数えてから問題を修正し...
RPM パッケージ管理インターネット ダウンロード パッケージのパッケージ化およびインストール ツー...
序文運用・保守を行う人がスキルを持っていなければ、サーバーを操作するのに恥ずかしさを感じてしまうと言...
この記事の例では、フルスクリーンスクロールを実現するためのjQueryの具体的なコードを参考までに共...
Ubuntu 20.04 がリリースされ、多くの新機能が導入されましたが、慣れていない機能も多くあ...
Nginx のインストールCentOS 6.x yum にはデフォルトで nginx ソフトウェア ...
質問会社がサーバーを移行した後、デフォルトで作成された docker0 ブリッジが会社の外部ネットワ...
MySQL でグループ化した後、各グループの最大値を取得する詳細な例1. テストデータベーステーブル...