JavaScript で簡単なショッピングカート関数を作成する-jsチュートリアル-php.cn

JavaScript で簡単なショッピングカート関数を作成する

高洛峰

リリース： 2017-02-04 13:31:46

オリジナル

1985 人が閲覧しました

ネット上にはショッピングカートの実装コードがたくさんありますので、いくつかの知識を読んだ後、自分でも書いてみようと思い、簡単なショッピングカートを書きました。

1. HTML を使用してコンテンツを実装します。

2. CSS を使用して動的効果を設計します。

最初のステップ: まず、すべての製品を含む大きな 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>

ログイン後にコピー

これにはナレッジポイントが含まれます: in

カートに追加

、javascript:;を使用しました。これは、空のイベントにジャンプして実行しないことを意味します。

ステップ 2: 外観をデザインする。表示を良くするために、各商品リストを含む div の幅、高さ、境界線を設定します。ショッピングカートを特定の位置に固定するには、その位置を設定することに注意してください。固定に設定し、上と左を設定して希望の位置に設定します。さらに、表示をより美しくするために、マージンとパディングを柔軟に使用する方法を習得する必要があります。

注: インライン要素の幅と高さ、またはその他のブロックレベルの要素属性を設定したい場合は、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) 上部と左の値を取得します。製品画像、ショッピングカートの上部と左の値を設定し、animate 関数を通じて動きを実現できるようにします。

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); //购物车数量变化
});

ログイン後にコピー

簡単な動きと変更はできました

しかし後から思ったのですが、更新するたびに数量が0に戻ってしまうのは矛盾しているように思えますショッピングカートの数を変更するには、次の 3 つの方法をまとめました。

(1) データベースに保存する。 cookie メソッド;

(3) h5 の localStorage メソッドを使用する

最後に、h5 の新しいメソッドを試してみたかったので、このメソッドをたまたま見たので、3 番目のメソッドを使用することにしました。 localStorage メソッドによって保存されたデータには期限がありません。2 週間目または翌年以降も、コードの特定の実装は引き続き使用できます: localStorage.getItem

言わなければならないことはすべて言いました。添付されているのは jq のコードです。気に入ったら、いいねしてください:

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、PHP 中国語 Web サイトをサポートしていただければ幸いです

JavaScript での簡単なショッピングカート関数の作成については、PHP 中国語 Web サイトを参照してください。