シンプルなショッピングカート機能を実現するjs

この記事の例では、簡単なショッピングカート機能を実現するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

1. 全体効果図

（消灯）

（電気をつけてください）

2. HTMLコード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ショッピングカート</title>
    <link type="text/css" rel="stylesheet" href="ショッピングカート style.css" >
    <script src="ショッピングカート関数.js"></script>
</head>
<body id="本文">
<button id="kg" onclick="kz()">ライトを点灯する</button>
<div id="cons">
    <テーブルid="テーブル">
        <tr>
            <th>製品名</th>
            <th>商品単価</th>
            <th>商品数量</th>
            <th>合計金額</th>
        </tr>
        <tr>
            <td>シャオミ 11</td>
            <td >5000</td>
            <td>
                <input type="button" value="-" onclick="add(this)">
                <span class="num">5</span>
                <input type="button" value="+" onclick="add2(this)"><!--誰がこれをクリックしたか調べる-->
            </td>
            <td class="money">25000</td>
        </tr>
        <tr>
            <td>レノボ Y9000</td>
            <td>10000</td>
            <td>
                <input type="button" value="-" onclick="add(this)">
                <span class="num">1</span>
                <input type="button" value="+" onclick="add2(this)">
            </td>
            <td class="money">10000</td>
        </tr>
        <tr>
            <td>メンズスキンケア</td>
            <td>200</td>
            <td>
                <input type="button" value="-" onclick="add(this)">
                <span class="num">1</span>
                <input type="button" value="+" onclick="add2(this)">
            </td>
            <td class="money">200</td>
        </tr>
        <tr>
            <td colspan="3">合計金額</td>
            <td id="total">5000</td>
        </tr>
    </テーブル>
</div>
</本文>
</html>

3. CSSコード

テーブル、th、td、tr{
    境界線: 5px 実線スレートブルー;
    境界線の半径: 10px;
 
             }
#短所{
    境界線: 3px 実線 #FFFFFF;
    幅: 600ピクセル;
    パディング: 5px;
    境界線の半径: 10px;
    マージン: 200px 自動;
}
＃体{
    背景色: 黒;
}
 
テーブル{
    /*表の境界線の結合表示を定義します*/
    /*境界線の折りたたみ: 折りたたみ;*/
    色: アクアマリン;
    幅: 600ピクセル;
    高さ: 200px;
    テキスト配置: 中央;
    border-collapse:separate;border-spacing:0;/*border-spacing プロパティは、隣接するセルの境界線間の距離を設定します (「border Separate」モードでのみ使用されます)。 */
    table-layout:fixed;/*固定テーブルレイアウト。水平レイアウトはテーブルの幅、列の幅、テーブルの境界線の幅、セルの間隔のみに依存し、セルの内容とは関係ありません。 */
 
}
＃kg{
    幅: 30ピクセル;
    /*境界線: 2px の白実線;*/
    背景色: 赤;
    色: スレートブルー;
 
}

4. jsコード

// 加算関数 add(obj) {
    // 製品の数を取得します var nums = obj.nextElementSibling.innerHTML /* 次の兄弟要素ノードの値を返します */
    if(数値>0){
        // クリックすると数値が減算されます--;
        //元の値を置き換えます obj.nextElementSibling.innerHTML=nums;
        // 合計価格の値を変更します // 商品の単価を取得します var price =obj.parentElement.previousElementSibling.innerHTML;
        // 商品の合計価格を取得します。 var tatol = obj.parentElement.nextElementSibling.innerHTML;
        obj.parentElement.nextElementSibling.innerHTML=parseInt(nums)*parseInt(price); //parseInt は文字列を数値 money() に変換します。
    }
 
    // console.log(数値);
 
}
// 減算関数 add2(obj){
    var nums =obj.previousElementSibling.innerHTML/*前の兄弟要素ノードの値を返します*/
    if(数値>=0){
        // クリックして nums++ を追加します。
        //元の値を置き換えます obj.previousElementSibling.innerHTML=nums;
        // 合計価格の値を変更します // 商品の単価を取得します var price =obj.parentElement.previousElementSibling.innerHTML;
        // 商品の合計価格を取得します。 var tatol = obj.parentElement.nextElementSibling.innerHTML;
        obj.parentElement.nextElementSibling.innerHTML=nums*price;
        お金（）;
    }
    // console.log(数値)
}
//合計金額を取得して変更する function money(){
    //合計金額のセルを取得します。var mo = document.getElementById("total");
    //商品の合計価格のセルを取得します。var momeys=document.getElementsByClassName("money");
    //合計金額の値を定義します var sum =0;
    for(var i=0;i<momeys.length;i++){
        合計=parseInt(momeys[i].innerHTML)+合計;
    }
    mo.innerHTML = 合計;
    // コンソール.log(合計)
 
}
//背景色を制御する関数kz(){
    var 背景 = document.getElementById("body");
    var color = window.getComputedStyle(background,null).backgroundColor; //背景色を取得します console.log(color);
    var font = document.getElementById("table"); //フォント var border = document.getElementById("cons"); //境界線 var switch1 = document.getElementById("kg"); //スイッチ //背景色、フォント色、境界線色を変更する if (color=="rgb(0, 0, 0)") {
        background.style.cssText="background-color: white;"; //CSS スタイルを変更します font.style.cssText="color: dimgray;";
        border.style.cssText="境界線: 3px 黒一色";
        switch1.innerHTML="ライトを消す";
    }
    そうでない場合は(color=="rgb(255, 255, 255)"){
        background.style.cssText="背景色: 黒;";
        font.style.cssText="色: アクアマリン;";
        border.style.cssText="境界線: 3px 実線 #FFFFFF";
        switch1.innerHTML="ライトを点灯する";
    }
 
 
}

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

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