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

この記事では、ショッピングカートの増減と価格計算を実現するためのjsの具体的なコードを紹介します。具体的な内容は次のとおりです。

要件：

1. 「半分閉じる」ボタンをクリックすると、現在のショッピングカートページが閉じます
2. 「お気に入りに移動」をクリックすると、コレクションプロンプトが表示されます。
3. 「削除」をクリックすると、削除を確認するプロンプトが表示されます。
4. 「決済」ボタンをクリックすると、決済情報ページウィンドウがポップアップ表示されます。
5. 商品の合計を自動計算する
6. 「削除」ボタンをクリックし、parentNode を使用して現在のノードの親ノードにアクセスし、removeChild() を使用して現在の製品を削除します。

効果画像:

コード：

<!DOCTYPE html>
<html>
<head lang="ja">
    <メタ文字セット="UTF-8">
    <title>Dangdang ショッピングカート ページの改善</title>
    <スタイル タイプ="text/css">
     本文、ul、li、div、p、h1、h2、ol{マージン: 0;パディング: 0;}
ul、li、ol{リストスタイル: なし;}
.content{幅: 810px; マージン: 0 auto; フォント ファミリ: "Microsoft YaHei";}
.logo{マージン: 10px 0;}
.logo span{
    表示: インラインブロック;
    フロート: 右;
    幅: 60ピクセル;
    高さ: 30px;
    行の高さ: 30px;
    フォントサイズ: 14px;
    背景: #ff0000;
    色: #ffffff;
    テキスト配置: 中央;
    境界線の半径: 10px;
    上マージン: 5px;
    右マージン: 10px;
    カーソル: ポインタ;
    フォントの太さ: 太字;
}
.カートリスト{
    /*背景: url("../image/02.jpg") 繰り返しなし;*/
    /*高さ: 414px;*/
    オーバーフロー: 非表示;
}
.cartList ul{
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースの間;
    /*float: 右;*/
    /*幅: 450px;*/
}
.cartList ul:n番目の型(1){
    ディスプレイ: フレックス;
    上マージン: 125px;
}
.cartList ul:n番目の型(2){
    マージン: 20px 0;
}
.cartList ul li{
    フォントファミリ: "Microsoft YaHei";
    フォントサイズ: 12px;
    色: #666666;
    テキスト配置: 中央;
    行の高さ: 25px;
    /*float: 左;*/
}
.cartList ul li input[name="price"]{
    境界線: なし;
    背景: 透明;
    幅: 45px;
    テキスト配置: 中央;
}
.cartList ul li input[name="金額"]{
    幅: 45px;
    テキスト配置: 中央;
    境界線: 1px 実線 #999999;
    左境界線: なし;
    右境界線: なし;
    高さ: 21px;
}
.cartList ul li input[name="マイナス"],.cartList ul li input[name="プラス"]{
    高さ: 25px;
    境界線: 1px #999999 実線;
    幅: 25px;
    テキスト配置: 中央;
}
.cartList ul li:nth-of-type(1){幅: 130px;}
.cartList ul li:nth-of-type(2){幅: 100px;}
.cartList ul li:nth-of-type(3){幅: 130px;}
.cartList ul li p{カーソル: ポインター;}
.cartList ol{
    フロート: 右;
    クリア: 両方;
    上マージン: 40px;
}
.cartList ol li{
    フロート: 左;
}
.cartList ol li:nth-of-type(1){
    色: #ff0000;
    幅: 80ピクセル;
    高さ: 35px;
    行の高さ: 35px;
    テキスト配置: 中央;
}
.cartList ol li span{display: inline-block;
    フロート: 右;
    幅: 80ピクセル;
    高さ: 35px;
    行の高さ: 35px;
    フォントサイズ: 14px;
    フォントファミリ: "Microsoft YaHei";
    背景: #ff0000;
    色: #ffffff;
    テキスト配置: 中央;
    /*上マージン: 5px;*/
    /*右マージン: 15px;*/
    カーソル: ポインタ;
    フォントの太さ: 太字;}
 
    </スタイル>
</head>
 
<!--onload、ロード時に元の量を計算-->
<body onload="total()">
 
<div class="content">
    <div class="logo">
        <span onclick="javascript:if (confirm('閉じてもよろしいですか?'))window.close()">閉じる</span>
    </div>
    <div class="cartList">
        <ul>
            <li>製品情報</li>
            <li>製品画像</li>
            <li>単価（元）</li>
            <li>数量</li>
            <li>金額（元）</li>
            <li>操作</li>
        </ul>
        <ul style="display: flex; justify-content: space-between; align-items: center" id="first">
            <li>普通の世界</li>
            <li><img src="./img/1.png" alt="" 幅="50" 高さ="50"></li>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(0)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0)" ></li>
            <li id="price0">21.90円</li>
            <li><p onclick="save()">お気に入りに追加</p><p onclick="delete1()">削除</p></li>
        </ul>
        <ul style="display: flex; justify-content: space-between; align-items: center; margin: 20px 0;">
            <li>《昆虫の生命》</li>
            <li><img src="./img/2.png" alt="" 幅="50" 高さ="50"></li>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1)"></li>
            <li id="price1">24.00円</li>
            <li><p onclick="save()">お気に入りに追加</p><p onclick="delete1()">削除</p></li>
        </ul>
        <オル>
            <li id="totalPrice">&nbsp;</li>
            <li><span>和解</span></li>
        </ol>
    </div>
</div>
</本文>
</html>
 
<スクリプト>
    //減算関数 minus(index) {
        //現在の金額を取得します。var amount=document.getElementsByName("amount");
 
        //最初の金額要素の value 属性の値を取得します。var count=parseInt(amounts[index].value); //数値に 1 を加えた値
 
        （カウント<=1）の場合{
            alert("もう減らせない、もうすぐなくなるよ!!");
        } それ以外 {
            //最初の金額要素の value 属性の値を取得します。var count=parseInt(amounts[index].value)-1; //数値に 1 を加えた値
 
            // カウント値を数量テキストボックスに再バインドします。amounts[index].value=count;
            var 価格 = document.getElementsByName("価格");
            var price = parseFloat(prices[index].value);
            //Math.pow(10,2) を掛ける理由は歪みを避けるためです var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
 
            document.getElementById("price"+index).innerHTML="¥："+totalMoney;
        }
 
        合計（）;
 
    }
 
    //加算関数 plus(index) {
 
        //現在の金額を取得します。var amount=document.getElementsByName("amount");
 
        //最初の金額要素の value 属性の値を取得します。var count=parseInt(amounts[index].value)+1; //数値に 1 を加えた値
 
        // カウント値を数量テキストボックスに再バインドします。amounts[index].value=count;
 
        //現在稼働中のポートの価格も再計算する必要があります //現在のポートの単価を取得します var prices=document.getElementsByName("price");
        var price = parseFloat(prices[index].value);
        //Math.pow(10,2) を掛ける理由は歪みを避けるためです var totalMoney=((price*Math.pow(10,2))*count)/Math.pow(10,2);
 
        //テキストドキュメントに現在の価格を表示します。getElementById("price"+index).innerHTML="¥："+totalMoney;
 
        合計（）;
    }
 
 
    //合計金額を計算するfunction total() {
 
        //すべての数量を取得します。var counts = document.getElementsByName("amount");
 
        //すべての単価を取得します。var prices=document.getElementsByName("price");
 
        var 合計金額 = 0;
 
        (var i=0;i<counts.length;i++){
 
            //Math.pow(10,2) を掛ける理由は歪みを避けるためです。sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));
        }
 
        //指定された要素の合計金額を表示します。 document.getElementById("totalPrice").innerHTML="¥："+sumMoney;
 
    }
 
 
    //お気に入りに追加する関数 save() {
        if (confirm("本当に保存しますか?")){
            alert("収集に成功しました!");
        }
 
    }
    //削除関数 delete1() {
        if (confirm("本当に削除しますか?")) {
            var del = document.getElementById("first");
            親ノードから子ノードを削除します。
            alert("正常に削除されました!!");
        }
    }
</スクリプト>

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

以下もご興味があるかもしれません: