jsはショッピングカートの加算と減算、価格計算を実装します

jsはショッピングカートの加算と減算、価格計算を実装します

この記事の例では、ショッピングカートの加算と減算、価格計算を実装するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jsはショッピングカートの加算と減算、価格計算機能を実現します
  • ショッピングカート内のアイテム数を増減するjs
  • vue.js ショッピングカートに製品コンポーネントを追加する方法
  • ソースコードのダウンロードによる JavaScript ベースの「カートに追加」エフェクトの実装
  • JSはショッピングカート効果の単純な加算と減算を実装します

<<:  MySQL ストアド プロシージャを作成 (CREATE PROCEDURE) して呼び出す (CALL) 方法と、変数を作成 (DECLARE) して割り当てる (SET) 方法

>>:  CentOS での Django プロジェクトのデプロイに関する詳細なチュートリアル

推薦する

MySQLクエリが遅い理由

目次1. 遅いところはどこですか? 2. 不要なデータをクエリしましたか? 1. 不要なレコードをク...

Linux 上でプライベート Git サーバーを構築するための詳細なチュートリアル

1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...

MySQL並列レプリケーションの簡単な説明

1. 並列レプリケーションの背景まず、並列レプリケーションの概念はなぜ存在するのでしょうか? 1. ...

最小限のルートファイルシステムを構築するためにbusyboxを移植するための詳細な手順

Busybox: 小さなコマンドが詰まったスイスアーミーナイフ。ステップ1: ディレクトリ構造を作成...

Linux での chmod コマンドの使用方法の詳細な説明

chmod コマンド構文chmod コマンドを使用する場合の正しい構文は次のとおりです。 chmod...

MySQL で固定されていない位置から文字列要素を抽出する方法

序文注: テストデータベースのバージョンはMySQL 8.0ですテストデータ: テーブルzqs(id...

Vue ミックスインの使い方の詳しい説明

目次Vue ミックスインの使用ミックスインでのデータアクセスミックスイン/index.jsホーム.v...

CSSスクロールバーのスタイルをカスタマイズする方法の詳細な説明

この記事では、CSS スクロールバー セレクターを紹介し、Webkit ブラウザーと IE ブラウザ...

CentOS 7.6 Telnetサービス構築プロセス(Opensshアップグレードバトル第一弾のバックアップトランスポートライン構築)

不明な点があるときはいつでも、Blog Park にアクセスして、いつでも答えやインスピレーションを...

Web ページのソース ファイルを表示できない場合はどうすればよいですか?

Q: Outlook または IE のどちらを使用している場合でも、マウスを右クリックすると、ポッ...

dockerでnginxを実行するときにdaemon offが使用される理由についての簡単な説明

とても嬉しいです。この問題に遭遇したとき、私はDockerコンテナのプロセス原理について話さなければ...

MySQL Binlog ログの読み取り時によくある 3 つのエラー

1. mysqlbinlog: [エラー] 不明な変数 'default-character...

Alibaba Cloud centos7にmysql8.0.22をインストールする詳細なチュートリアル

1. MySQLインストールパッケージをダウンロードするまず、https://dev.mysql.c...

MYSQL の COLLATE とは何ですか?

序文MySQL で show create table <tablename> コマンド...

Web デザインにおける HTML フォーマットと長いファイルに関するヒント

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案、W...