ネイティブ JavaScript でショッピングカートを実装する

ネイティブ JavaScript でショッピングカートを実装する

この記事では、ショッピングカートを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

効果:

コード:

<!DOCTYPE html>
<html>
 <ヘッド>
 <メタ文字セット="UTF-8">
 <タイトル></タイトル>
 <スタイル>
 *{
 マージン: 0;
 パディング:0;
 }
 。箱{
 幅:600ピクセル;
 マージン: 10px 自動;
 背景: url(img/g.jpg);
 高さ:500px;
 }
 td{
 テキスト配置: 中央;
 フォントサイズ: 30px;
 色:オレンジ;
 }
 ボタン{
 幅:150ピクセル;
 境界線:0;
 境界線の半径: 5px;
 高さ:30px;
 背景色: ドジャーブルー;
 }
 
 /*.trl:ホバー{
 背景:ピンク;
 }*/
 
 </スタイル>
 </head>
 <本文>
 <div class="box">
 <br />
 <button>すべて削除</button>
 <button>削除を選択</button>
 <br>
 <br>
 <input type="text" value="キーワードを入力してください" />
 <input type="button" value="検索" />
 
 <br>
 <br>
 <テーブルの幅='600' 境界線="1" セル間隔="0">
 <tr>
  <th><input type="checkbox" class="qx" />すべて選択</th>
  <th>製品</th>
  <th>価格</th>
  <th>シリアル番号</th>
  <th>起源</th>
  <th>ブランド</th>
  <th>オペレーション</th>
 </tr>
 <tr クラス="trl">
  <td><input type="checkbox" class="dx" /></td>
  <td class="shop">ドリアン</td>
  <td>20元</td>
  <td class="ind">1</td>
  <td>海南</td>
  <td>アンパイ</td>
  <td onclick="del(this)">削除</td>
 </tr>
 <tr クラス="trl">
  <td><input type="checkbox" class="dx" /></td>
  <td class="shop">アップル</td>
  <td>20元</td>
  <td class="ind">2</td>
  <td>海南</td>
  <td>アンパイ</td>
  <td onclick="del(this)">削除</td>
 </tr>
 <tr クラス="trl">
  <td><input type="checkbox" class="dx" /></td>
  <td class="shop">ストロベリー</td>
  <td>20元</td>
  <td class="ind">3</td>
  <td>海南</td>
  <td>アンパイ</td>
  <td onclick="del(this)">削除</td>
 </tr>
 <tr クラス="trl">
  <td><input type="checkbox" class="dx" /></td>
  <td class="shop">バナナ</td>
  <td>20元</td>
  <td class="ind">4</td>
  <td>海南</td>
  <td>アンパイ</td>
  <td onclick="del(this)">削除</td>
 </tr>
 </テーブル>
 </div>
 <スクリプト>
//すべて選択するか、何も選択解除します var qx=document.getElementsByClassName('qx')[0];
   var dx = document.getElementsByClassName("dx");
   qx.onclick=関数(){
    (var i=0;i<dx.length;i++){
    dx[i].checked=qx.checked
    }
   }
 //すべて削除 var btn=document.getElementsByTagName("button");
   タグ名によって要素を取得します。
   var tbody = document.getElementsByTagName("tbody")[0];
   btn[0].onclick=関数(){
    for(var i=1;i<tr.length;i++){
     tbody.removeChild(tr[i]);
     私 - ;
    }       
   }
 //選択して削除 var dx=document.getElementsByClassName('dx');
   btn[1].onclick=関数(){
   (var i=0;i<dx.length;i++){
    if(dx[i].checked==true){
    tbody.removeChild(dx[i].parentNode.parentNode)
    私 - ;
    indChange();
    }
   }
   }
 // テキスト ボックスをクリアして検索し、色を変更します。var input = document.getElementsByTagName('input');
  
  入力[0].onfocus=関数(){
  this.value=""
  }
  
  var shop = document.getElementsByClassName('shop');
  
  input[1].onclick=関数(){
   for(var i=0;i<shop.length;i++){
   
   if(shop[i].innerHTML==input[0].value){
   (var j=0;j<shop.length;j++){
   ショップ[j].parentNode.style.background=""
   }
   shop[i].parentNode.style.background="黄色"
   }
   }
  }
  
// 
//ホバーの内外を移動する 
  for(var i=1;i<tr.length;i++){
  tr[i].onmouseover=関数(){
  this.style.background="ピンク"
  }
  tr[i].onmouseout=関数(){
  このスタイルの背景=""
  }
  
  }

// 単一行削除(シリアル番号)
// 親要素.removeChild(子要素) tbody delete tr
 関数del(t){
  tbody.removeChild(t.parentNode);
  indChange();
 }
 
 
 //シリアル番号関数 indChange(){
  var ind = document.getElementsByClassName("ind");
  for(var i=0;i<ind.length;i++){
  ind[i].innerHTML=i+1;
  }
 }
 
 
 </スクリプト>
 </本文>
</html>

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

以下もご興味があるかもしれません:
  • JSはショッピングカートの基本機能を実現します
  • ショッピングカート機能を実現するネイティブjs
  • ショッピングカートを実装するためのネイティブ js
  • ショッピングカート内のアイテム数を増減するjs
  • Vue.jsはシンプルなショッピングカート機能を実装します
  • Vuejsは、完全なショッピングカートのサンプルコードを書く方法を段階的に教えてくれます
  • js ショッピング カートの実装のアイデアとコード (個人的には良い感じ)
  • JavaScript で簡単なショッピングカート機能を書く
  • ショッピングカート機能を実装するためのJavascriptの詳細なコード
  • jsは画像とコードを使ったシンプルなショッピングカートを実装します

<<:  モバイルの赤い封筒の雨機能ページを実装するための JavaScript HTML

>>:  ページ切り替え効果を実現するJSコード

推薦する

Reactは一般的なスケルトン画面コンポーネントの例を実装します

目次スケルトンスクリーンとは何ですか?デモデザインのアイデア具体的な実装スケルトンスクリーンとは何で...

JS の FileReader を介して .txt ファイルの内容を取得する方法

目次JSはFileReaderを通じて.txtファイルの内容を取得します。 .txtファイルの読み取...

Vuexはセッションストレージデータを結合して、ページを更新するときにデータが失われる問題を解決します

目次序文1. 理由: 2. 解決策のアイデア: 1. ローカル保存方法: 2. 実装手順: 3. 最...

Node.js組み込みモジュールの詳細な説明

目次概要1. パスモジュール2. モジュールまで3. fsモジュール4. イベントモジュール5. h...

CocosCreatorのホットアップデートの包括的な説明

目次序文ホットチェンジとはCocos Hot アップデートの概要マニフェストプロジェクトリソースとゲ...

MySQL の制限使用法とページングクエリステートメントのパフォーマンス分析の詳細な説明

使用制限クエリ ステートメントを使用する場合、多くの場合、データの最初の数行または中間行を返す必要が...

素晴らしいCSS属性MASKの詳しい説明

この記事では、CSS の非常に興味深い属性マスクを紹介します。名前が示すように、マスクはマスクと翻訳...

Linuxはシェルスクリプトを使用して履歴ログファイルを定期的に削除します

1. ツールディレクトリのファイル構造 [root@www tools]# ツリーツール/ ツール/...

企業サイトとコラム辞典 中国語と英語の比較 中国語と英語のバイリンガル企業サイトを作る仲間は

名前キャラクター名前キャラクター情報ニューステクノロジー技術スキンケアスキンケア補う補う香水香水化粧...

Node はあいまい検索用の検索ボックスを実装します

この記事の例では、検索ボックスでファジークエリを実装するためのNodeの具体的なコードを参考までに共...

Ubuntu 20.04 と NVIDIA ドライバーのインストールに関するチュートリアル

Ubuntu 20.04をインストールする NVIDIAドライバーをインストールする Pytouch...

Dockerfile ビルド中に発生する「/bin/sh: pip: コマンドが見つかりません」という問題の解決方法

記述した Dockerfile の内容は次のとおりです。 Python:3.6.8 から pip i...

UDP シンプル サーバー クライアント コード例

UDP の理論については詳しく説明しません。UDP に関する HelloWorld プログラムを紹介...

Vue.js ディレクティブのカスタム命令の詳細な説明

デモコマンドをカスタマイズするVue カスタム ディレクティブの構文は次のとおりです。 Vue.di...

Vue バインディング オブジェクト、配列データを動的にレンダリングできないケースの詳細な説明

プロジェクトシナリオ: Dark Horse Vueプロジェクト管理の実践、製品分類の取得、拡張バー...