JavaScriptで簡単なショッピングカート機能を書く

オンラインにはカートの実装に関するコードが非常に多く、今日はいくつかの知識点を見て、自分で手を付けることにしました。それで簡単なカートを作成し、具体的な実装について説明します。　

1、htmlで内容を実装；　

2、cssで外観を装飾；　

3、js(jq)で動作をデザイン。

第1歩：まずはHTMLページのデザインを行います。私はすべての商品を含む大きなdivにまとめ、それぞれの商品をそれぞれのdivで封装し、商品リストにはul liを使用して実現しました。具体的な実装コードは以下の通りです（コードにはオンラインからコピーした商品が含まれており、参考価値はありません）：　

<div id="goods">
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/1.png"></li>
    <li class="godprice">￥25.00</li>
    <li class="godinfo">『鳥の詩集』には、多くの詩がベンガル語で書かれており、この詩集は最初に鄭振鐸先生によって中国に紹介されました。</li>
    <li class="godadd"><a href="javascript:;">カートに追加</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/2.png"></li>
    <li class="godprice">￥56.00</li>
    <li class="godinfo">この本は、現在のWeb関連技術を使用してAndroidアプリケーションを構築する方法について詳しく説明しています。</li>
    <li class="godadd"><a href="javascript:;">カートに追加</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/3.png"></li>
    <li class="godprice">￥37.00</li>
    <li class="godinfo">時間を文字で打ち負かす。馮唐の最も売れた作品は、雑誌が最も売れ、最も人気のある作品です。</li>
    <li class="godadd"><a href="javascript:;">カートに追加</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/1.png"></li>
    <li class="godprice">￥25.00</li>
    <li class="godinfo">『鳥の詩集』には、多くの詩がベンガル語で書かれており、この詩集は最初に鄭振鐸先生によって中国に紹介されました。</li>
    <li class="godadd"><a href="javascript:;">カートに追加</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/2.png"></li>
    <li class="godprice">￥56</li>
    <li class="godinfo">この本は、現在のWeb関連技術を使用してAndroidアプリケーションを構築する方法について詳しく説明しています。</li>
    <li class="godadd"><a href="javascript:;">カートに追加</a></li>
   </ul>
  </div>
  <div class="goodsItem">
   <ul class="goditem">
    <li class="godpic"><img src="images/3.png"></li>
    <li class="godprice">￥37.00</li>
    <li class="godinfo">時間を文字で打ち負かす。馮唐の最も売れた作品は、雑誌が最も売れ、最も人気のある作品です。</li>
    <li class="godadd"><a href="javascript:;">カートに追加</a></li>
   </ul>
  </div>
 </div>
 <div id="godcar">
  <div class="dnum">0</div>
  <div class="dcar">
   <img src="images/car.jpg">
  </div>
 </div>

其中涉及到一个知识点：在 <li class="godadd"><a href="javascript:;">加入购物车</a></li>中，我用到了javascript:;这个的意思表示不进行跳转，执行一个空事件。　

第二步：进行外观设计，为了更好的显示，我将包含每个商品列表的div设置了width和height,以及border,值得注意的是，我为了让购物车固定在某个位置，将其position设置为fixed，然后通过设置top和left让其固定在你想要的位置上。另外，要学会灵活使用margin和padding，让显示更美观。　

注：如果想给行内元素设置width和height或者其他块级元素的属性，那么需要设置display:block才可以。　

具体设计代码如下：　

* {
 padding: 0px;
 margin: 0px;
 font-family: "微软雅黑";
}
.goodsItem{
 width:280px;
 height: 400px;
 float: left;
 border: 1px solid #ccc;
 margin:5px;}
}
#goods{
 width:910px;}
}
.goditem{
 list-style: none;
}
.godpic img{
 display: block;
 width:250px;
 height: 250px;
 margin:0px auto;
}
.godprice,.godinfo,.godadd{
 display: block;
 width:220px;
 margin:0px auto;
 text-align: center;
}
.godprice{
 font-size: 20px;
 color: #f00;
}
.godinfo{
 text-align: center;
 font-size: 14px;}
 margin: 10px 0px;
}
.godadd a{
 display: block;
 width: 150px;
 height: 36px;}
 background-color: #fd6a01;
 border-radius: 10px;}
 margin: 0px auto;
 text-decoration: none;
 color:#fff;
 line-height: 36px;}
}
#godcar{
 position: fixed;
 right: 0px;
 top:40%;
 width: 72px;}
 height: 64px;}
}
#godcar .dnum{
 width:24px;}
 height: 24px;}
 border-radius: 12px;}
 background-color: #f00;
 text-align: center;
 line-height: 24px;}
 position: absolute;
 font-size: 12px;}
 top:0px;
}
.godadd .bg {
 background-color: #808080;
}

最初の*すべての要素に属性を設定することは、最初にmarginとpaddingを設定する良い習慣です。

第3ステップ：静的ページを実現した後、jqを使用してカートの具体的な実現を行う必要があります。例えば、カートに商品を追加する、カートの数量変更などです。私はこの機能を実現するために時間をかけ、商品をカートに追加するときに画像が徐々にカートに移動し、小さくなり、最後に消えるようにデザインしました。その中で、私はanimate関数を使用してこのプロセスを実現しました。この機能を実現する難点は、画像がどう移動し、どう変化するかです。　

次に、このプロセスを実現する方法について説明します：　

1）まず、商品の画像を取得し、取得した画像をコピーします；

var img = $(this).parent().find(".godpic").find("img");
 var cimg = img.clone();

2）商品の画像のtopとleft値、カートのtopとleft値を取得し、animate関数を通じて移動を実現するためです；var imgtop = img.offset().top;

var imgleft = img.offset().left;
var cartop = $("#godcar").offset().top;
var carleft = $("#godcar").offset().left; 

3）animate関数を書き、具体的な効果を実現します；
　cimg.appendTo($("body")).css({

    "position": "absolute",//絶対位置
    "opacity": "0.7",
    "top": imgtop,
    "left": imgleft
   }).animate({
    "top": cartop,
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3" //透明度
   }, 1000, function () {
    cimg.remove(); //画像の消滅
    $(".dnum").text(i); //カートの数量変更
   });

単純な移動と変化で実現できます。

しかし、後で考えたら、カートの数量がリフレッシュするときにリセットされるのは事実に合っていないと思ったので、ページをリフレッシュしたときにカートの数量が変更されないようにする方法を考えました。情報を調べて、3つの方法をまとめました：　

（1）をデータベースに保存；　
（2）を通じてcookieメソッド；　
（3）を通じてh5のlocalStorageメソッドを試してみたいからです；　

最後に、私は第三の方法を選択しました。なぜなら、h5の新しいメソッド（好奇心からも、このメソッドを見て手伝ってみたからです）、localStorageメソッドで保存されたデータには時間制限はありません。次の日に、次の週、または来年後でも、データは依然として使用できます。私のコードの具体的な実装：localStorage.getItem。

もうすべて話したことです。jqのすべてのコードを添付します。気に入ったらいいねをお願いします：

var i = 0;
$$(function() {
 var inum = 0;
 if (localStorage.getItem("inum") !== null) {
  inum = localStorage.getItem("inum");
 }
 $$(".dnum").text(inum);
 $$(".godadd").click(function() {
  if (!$(this).find("a").hasClass("bg")) {
   i++;
   $$(this).find("a").addClass("bg");
   var img = $(this).parent().find(".godpic").find("img");
   var cimg = img.clone();
   var imgtop = img.offset().top;
   var imgleft = img.offset().left;
   var cartop = $("#godcar").offset().top;
   var carleft = $("#godcar").offset().left;
   cimg.appendTo($("body")).css({
    "position": "absolute",
    "opacity": "0.7",
    "top": imgtop,
    "left": imgleft
   }).animate({
    "top": cartop,
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3"
   }, 1000, function () {
    cimg.remove();
    $(".dnum").text(i);
    localStorage.setItem("inum", i);
   });
  }
 });
}); 

効果画像：

これでこの記事はすべて終わりです。皆様の学習に役立てば幸いですし、もっと「呐喊教程」を応援していただけると嬉しいです。

声明：この記事の内容はインターネットから取得しており、著作権者はすべての権利を持ちます。コンテンツはインターネットユーザーにより自発的に提供され、自己でアップロードされています。本サイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害が疑われる内容がある場合は、メールを notice#w までご送信ください。3codebox.com（メールを送信する際、#を@に置き換えてください。通報を行い、関連する証拠を提供してください。一旦確認がとれましたら、本サイトは即座に侵害される内容を削除します。）