JavaScript로 간단한 쇼핑 카트 기능 작성

구매 장바구니 구현에 대한 코드는 인터넷에서 많이 있습니다. 오늘 몇 가지 지식을 보고, 스스로 작성하기로 결정하여 간단한 구매 장바구니를 작성했습니다. 그래서 구체적인 구현 방법에 대해 설명하겠습니다.　

1、html을 사용하여 내용을 구현하다;　

2、css를 사용하여 외관을 꾸미다;　

3、js(jq)를 사용하여 동작을 설계하다.

첫 번째 단계:먼저는 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을 설정하는 것도 좋습니다.

세 번째 단계:정적 페이지를 구현한 후, 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
   
    
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3" //투명도
   }, 1000, function () {
    cimg.remove(); //이미지 사라짐
    $(".dnum").text(i); //쇼핑카트 수량 변경
   });

간단한 이동과 변화만으로도 구현할 수 있습니다.

하지만 나중에 다시 생각해 보면, 쇼핑카트의 수량이 각각 새로운 페이지를 새로고침할 때마다 0으로 되돌아가는 것은 실제와 일치하지 않는 것 같아서, 새로운 페이지를 새로고침할 때 쇼핑카트의 수량이 변경되지 않도록 할 수 있는 방법을 생각해 보았습니다. 자료를 검색하고, 세 가지 방법을 요약했습니다:　

(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
   
    
    "left": carleft,
    "width": "40px",
    "height": "40px",
    "opacity": "0.3"
   }, 1000, function () {
    cimg.remove();
    $(".dnum").text(i);
    localStorage.setItem("inum", i);
   });
  }
 });
});

이미지 효과:

이것이 이 문서의 전체 내용입니다. 여러분의 학습에 도움이 되길 바랍니다. 또한,呐喊 교본에 많은 지지를 부탁드립니다.

고지사항: 이 문서의 내용은 인터넷에서 가져왔으며, 저작권자는 모두 소유자입니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공 편집을하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 침해가 의심되는 내용이 있으면, 이메일을 notice#w로 보내 주세요.3codebox.com에 이메일을 보내면 (#을 @으로 변경하십시오.) 신고하시고 관련 증거를 제공하십시오. 확인되면, 이 사이트는 즉시 저작권 침해 내용을 삭제합니다.

기본 가이드