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

推薦する

jQueryは広告の表示と非表示のアニメーションを実装します

数秒後に広告が表示されて消えることがよくあります。この機能を実装するには、JQuery フレームワー...

デザインのヒント: きっと気に入っていただけると思います

<br />このタイトルを見ると、見覚えがあるかもしれません。多くのウェブサイトが同様の...

SQLの最適化では間違いがよく起こります。それはMySQLのExplain Planの使い方を理解していないからです。

目次1. 準備2. 説明計画の概要3. フィールドの詳細な説明4. パーティションクエリにはパーティ...

MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル

この記事では、mysql5.7.23 の詳細なインストールプロセスを記録し、皆さんと共有します。 1...

ブラウザでビデオプレーヤーを実装するための基本的な考え方とコード

目次序文ブラウザにおけるオーディオとビデオに関する知識のまとめビデオエンコーディング包装形態オーディ...

Dreamweaver8を使用してウェブサイトのファイルをチェックして整理する方法

Dreamweaver8 を使用して独自の Web サイトを作成する目的は何ですか?インターネットに...

色の16進数カラーコード表表示と16進値の比較表示で簡単に検索できます

さまざまな色の16進コード表[パート1] 赤とピンク、およびそれらの 16 進コード。 #99003...

Docker 可視化グラフィックツール portainer の詳細な説明

目次1. ポーテナーの紹介2. Portainer アーキテクチャの概要3. Portainerのイ...

Vueは時間カウントダウン機能を実装する

この記事では、Vueの具体的なコード例を参考までに紹介します。具体的な内容は以下のとおりです。必要:...

SSHのssh-keygenコマンドの基本的な使い方の詳細な説明

SSH 公開鍵認証は、SSH 認証方式の 1 つです。 SSH パスワードフリーのログインは公開鍵認...

CentOS7 で MySQL 5.7.24 をコンパイルしてインストールする詳細なチュートリアル

目次依存関係をインストールするブーストをインストールMySQLをコンパイルしてインストールする構成依...

M1 チップに MySQL 8.0 データベースをインストールする方法 (画像とテキスト)

1. ダウンロードまず、MySQLの国内ミラーをお勧めします。特に速いわけではありませんが、それで...

Spring環境を構成するためのDocker-composeの手順

最近、メンバーがテストできるようにプロジェクトをパッケージ化する必要がありますが、パッケージ化された...

MySql はデータを正常に挿入しますが、[Err] 1055 エラーが報告されます。解決策

1. 質問:最近、挿入操作を行っています。MySQLのバージョンは5.7です。挿入は成功しますが、エ...