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

推薦する

JavaScript実行メカニズムの詳細な紹介

目次1. プロセスとスレッドの概念2. ブラウザの原則3. 同期と非同期4. 実行スタックとタスクキ...

FirefoxでCookieとお気に入りをインポートおよびエクスポートする方法

Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...

Linux 構成 SSH パスワードフリーログイン「ssh-keygen」の基本的な使い方

目次1 SSHとは何か2 SSHパスワードフリーログインを設定する2.1 必要なソフトウェアのインス...

Centos7 で ZooKeeper3.4 ミドルウェアを構築するための一般的なコマンドの概要

1.ダウンロードして解凍する1. Zookeeperの紹介分散サービス フレームワークとして、Zoo...

HTML の基本概要推奨事項 (段落)

HTML段落段落は <p> タグによって定義されます。例<p>これは段落で...

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル (win10 の場合)

この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...

MySQL のインデックス有効条件とインデックス無効条件の結合

目次1. ジョイントインデックスの故障の条件2. インデックス失敗の条件1. ジョイントインデックス...

MySQL 8.0.11 圧縮版のインストールチュートリアル

この記事では、MySQL 8.0.11のインストールチュートリアルを参考までに紹介します。具体的な内...

Docker イメージの最適化 (1.16GB から 22.4MB)

目次最適化の第一歩: 軽量ベースイメージの使用第2段階の最適化:多段階構築Docker は、ソフトウ...

Ubuntuがネットワークに接続できない場合の解決策

仮想マシン内の Ubuntu がネットワークに接続できない場合の効果的な解決策: 1. Ubuntu...

Alibaba Cloud Serverにプログラムをデプロイし、ドメイン名を使用して直接アクセスする方法の詳細な説明

何もすることがなかったので、学習用に最も安いAlibaba Cloudサーバーを購入しました。年間3...

JSで実現したページサイドバーの効果に関する研究

目次発見: ディスプレイアニメーションの応用実装:記事の1行目を表示する効果を実現する方法実際、その...

Vue での weixin-js-sdk の一般的な使用方法の詳細な説明

リンク: https://qydev.weixin.qq.com/wiki/index.php?ti...

MySQL挿入パフォーマンスを最適化する方法の例

MySQL パフォーマンスの最適化MySQL パフォーマンスの最適化とは、リソースを合理的に配置し、...

bashの初期化メカニズムの詳細な説明

Bash 初期化ファイル対話型ログインシェル次の場合にはログイン シェルを取得できます。ローカル端末...