ネイティブ 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コード

推薦する

CSSはリストのスタイルを設定し、ナビゲーションメニューの実装コードを作成します。

1. リストシンボルを設定するlist-style-type: attribute; //リストの...

MYSQLテーブルの包括的な概要

目次1. テーブルを作成する1.1. テーブルを作成するための基本構文1.1.1. シンプルなテーブ...

JavaScript 改ざん防止オブジェクトの使用例

目次JavaScript 改ざん防止オブジェクト1. 拡張不可能なオブジェクト2. 封印された物体3...

MySQL カーソル関数と使用法

目次意味カーソルの役割カーソルの使用カーソルの宣言カーソルを開くカーソルデータのトラバースカーソルを...

CSS グリッドレイアウトの完全ガイド

Grid は 2 次元のグリッド レイアウト システムです。これを使用すると、本質的にはハック メソ...

MYSQL パフォーマンス アナライザー EXPLAIN 使用例分析

この記事では、例を使用して MYSQL パフォーマンス アナライザー EXPLAIN の使用方法を説...

javascript:void(0) の意味と使用例

voidキーワードの紹介まず、void キーワードは JavaScript で非常に重要なキーワード...

Bash で山括弧を使用するその他の方法

序文この記事では、山括弧のその他の用途をさらに詳しく見ていきます。前回の記事では、山括弧 (<...

mysql における mydumper と mysqldump の比較

いくつかのテーブルまたは単一のデータベースのみをバックアップする場合は、innobackup よりも...

Linuxファイル削除後にスペースが解放されない問題の詳しい説明

序文システム領域の使用量が大きすぎて消去する必要がある場合、または特定のファイルを消去する必要がある...

MySQL InnoDB ストレージエンジンのメモリ管理の詳細な説明

目次ストレージエンジンのメモリ管理データ ページを LRU キューの先頭に置かないのはなぜですか?ダ...

ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します。

ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します...

nginx を使用した負荷分散モジュールの解釈

目次負荷分散に nginx を使用するための 2 つのモジュール:アップストリームはロードノードプー...

さまざまな解像度やブラウザでウェブページを適切に表示する方法

キーコードは次のとおりです。コードをコピーコードは次のとおりです。 html{高さ:100%; }コ...