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

シンプルなショッピングカート機能を実現する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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vuejsは、完全なショッピングカートのサンプルコードを書く方法を段階的に教えてくれます
  • js ショッピング カートの実装のアイデアとコード (個人的には良い感じ)
  • JavaScript で簡単なショッピングカート機能を書く
  • ショッピングカート機能を実装するためのJavascriptの詳細なコード
  • jsは画像とコードを使ったシンプルなショッピングカートを実装します
  • ショッピングカート機能を実現するJsp+Servlet
  • Javascript は Cookie を操作してショッピングカート プログラムを実装します
  • シンプルなフロントエンド js+ajax ショッピング カート フレームワーク (初心者向けガイド)
  • ネイティブ js シミュレーション Taobao ショッピング カート プロジェクト実践
  • ショッピングカートの追加と削除の効果を実現する js

<<:  Dockerはローカルイメージをパッケージ化し、他のマシンに復元します

>>:  HTML に CSS を導入するいくつかの方法の紹介

推薦する

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

目次ローカルミックスイングローバル ミックスイン要約するローカルミックスイン <テンプレート&...

h1、h2、h3タグを適切に使用する

Web ページを作成する過程では、<h1>、<h2>、<h3> ...

円形/扇形メニューを2分で実装する方法を教えます(基本バージョン)

序文このプロジェクトでは円形のメニューが必要です。オンラインで検索しましたが、適切なものが見つからな...

Dockerコンテナ起動時に固定IPを設定する実装

Dockerインストール後のネットワークタイプ [root@insure updev]# docke...

包括的なウェブサイト評価ソリューション

<br />「XXXのウェブサイトを見てみませんか?」といった質問をされることもあります...

MySQLの日付と時刻の間隔計算の分析例

この記事では、例を使用して、MySQL の日付と時刻の間隔計算について説明します。ご参考までに、詳細...

自己終了XHTMLタグを書くときに注意すべきこと

XHTML の img タグはいわゆる自己終了タグであり、XML では完全に合法です。 XHTMLの...

Linux 上の MYSQL 5.7 でルート パスワードを取得する際の問題 (テスト済み、利用可能)

目次1. --skip-grant-tables 経由で取得する1.1 my.conf を変更し、新...

Linux 仮想マシンの IP アドレスを変更し、ゲートウェイを確認し、ネットワーク環境を構成する方法に関するチュートリアル

仮想マシンの IP アドレスを変更します。 次のインターフェイスに入り、サブネット IP を直接変更...

CSS グリッドレイアウトで列にアイテムを埋め込む方法

n 個のアイテムがあり、これらのアイテムをグリッド レイアウトの列に並べ替える必要があるとします。列...

ウェブデザイン:大量の素材の正確な配置と使用

3回の暗記により、大量の資材の正確な場所と目的を記憶でき、その使いやすさが向上します。 これは単なる...

MySQLがOracleのnvlと同様の機能を持つことができるかどうかについての簡単な議論

isnullの代わりにifnullを使用するisnull は、null かどうかを判断するために使用...

CentOS 7.5 に Docker をインストールする詳細なチュートリアル

Docker入門Docker は、アプリケーションをより速く配信するのに役立つオープンソースのコンテ...

コーディングスキルを向上させるためのJavaScriptのヒント

目次1. 一意の値をフィルタリングする2. 短絡評価2.1 シナリオ例3. ブール変換4. 文字列を...

MySQLの制限を使用して大規模なページングの問題を解決する方法

序文日常の開発では、MySQL を使用してページングを実装する場合、常に MySQL 制限構文を使用...