购物车实现

网上关于购物车实现的代码非常多，今天看了一些知识点，决定自己动手写写，于是写了一个简易购物车，接下来讲解一下具体的实现。

1、用html实现内容；

2、用css修饰外观；

3、用js(jq)设计动效。

 

第一步：首先是进行html页面的设计，我用一个大的div将所有商品包含，然后用不同的div将不同的商品进行封装，商品列表中我用了ul li实现，具体实现代码如下（代码中涉及到的商品都是网上随便copy的，不具有参考价值）：

[html] view plain copy

1. <div id="goods">  
2.         <div class="goodsItem">  
3.             <ul class="goditem">  
4.                 <li class="godpic"><img src="images/1.png"></li>  
5.                 <li class="godprice">￥25.00</li>  
6.                 <li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗集最早由郑振铎先生译介到中国。</li>  
7.                 <li class="godadd"><a href="javascript:;">加入购物车</a></li>  
8.             </ul>  
9.         </div>  
10.         <div class="goodsItem">  
11.             <ul class="goditem">  
12.                 <li class="godpic"><img src="images/2.png"></li>  
13.                 <li class="godprice">￥56.00</li>  
14.                 <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>  
15.                 <li class="godadd"><a href="javascript:;">加入购物车</a></li>  
16.             </ul>  
17.         </div>  
18.         <div class="goodsItem">  
19.             <ul class="goditem">  
20.                 <li class="godpic"><img src="images/3.png"></li>  
21.                 <li class="godprice">￥37.00</li>  
22.                 <li class="godinfo">用文字打败时间。冯唐最畅销作品，杂文才是其销量最好、最受欢迎的作品。</li>  
23.                 <li class="godadd"><a href="javascript:;">加入购物车</a></li>  
24.             </ul>  
25.         </div>  
26.         <div class="goodsItem">  
27.             <ul class="goditem">  
28.                 <li class="godpic"><img src="images/1.png"></li>  
29.                 <li class="godprice">￥25.00</li>  
30.                 <li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗集最早由郑振铎先生译介到中国。</li>  
31.                 <li class="godadd"><a href="javascript:;">加入购物车</a></li>  
32.             </ul>  
33.         </div>  
34.         <div class="goodsItem">  
35.             <ul class="goditem">  
36.                 <li class="godpic"><img src="images/2.png"></li>  
37.                 <li class="godprice">￥56</li>  
38.                 <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>  
39.                 <li class="godadd"><a href="javascript:;">加入购物车</a></li>  
40.             </ul>  
41.         </div>  
42.         <div class="goodsItem">  
43.             <ul class="goditem">  
44.                 <li class="godpic"><img src="images/3.png"></li>  
45.                 <li class="godprice">￥37.00</li>  
46.                 <li class="godinfo">用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。</li>  
47.                 <li class="godadd"><a href="javascript:;">加入购物车</a></li>  
48.             </ul>  
49.         </div>  
50.     </div>  
51.   
52.     <div id="godcar">  
53.         <div class="dnum">0</div>  
54.         <div class="dcar">  
55.             <img src="images/car.jpg">  
56.         </div>  
57.     </div>  

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

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

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

[css] view plain copy

1. * {  
2.     padding: 0px;  
3.     margin: 0px;  
4.     font-family: "微软雅黑";  
5. }  
6.   
7. .goodsItem{  
8.     width:280px;  
9.     height: 400px;  
10.     float: left;  
11.     border: 1px solid #ccc;  
12.     margin:5px;  
13. }  
14. #goods{  
15.     width:910px;  
16. }  
17. .goditem{  
18.     list-style: none;  
19. }  
20. .godpic img{  
21.     display: block;  
22.     width:250px;  
23.     height: 250px;  
24.     margin:0px auto;  
25. }  
26. .godprice,.godinfo,.godadd{  
27.     display: block;  
28.     width:220px;  
29.     margin:0px auto;  
30.     text-align: center;  
31. }  
32. .godprice{  
33.     font-size: 20px;  
34.     color: #f00;  
35. }  
36. .godinfo{  
37.     text-align: center;  
38.     font-size: 14px;  
39.     margin: 10px 0px;  
40.   
41. }  
42. .godadd a{  
43.     display: block;  
44.     width: 150px;  
45.     height: 36px;  
46.     background-color: #fd6a01;  
47.     border-radius: 10px;  
48.     margin: 0px auto;  
49.     text-decoration: none;  
50.     color:#fff;  
51.     line-height: 36px;  
52. }  
53. #godcar{  
54.     position: fixed;  
55.     right: 0px;  
56.     top:40%;  
57.     width: 72px;  
58.     height: 64px;  
59. }  
60. #godcar .dnum{  
61.     width:24px;  
62.     height: 24px;  
63.     border-radius: 12px;  
64.     background-color: #f00;  
65.     text-align: center;  
66.     line-height: 24px;  
67.     position: absolute;  
68.     font-size: 12px;  
69.     top:0px;  
70. }  
71. .godadd .bg {  
72.     background-color: #808080;  
73. }  

       第一个*表示为所有元素设置属性，在一开始就设置margin和padding是一个很好的习惯。

      第三步：实现了静态页面，接下来需要通过jq进行购物车具体的实现，比如加入购物车，购物车数量变化等。我花了一些时间在设计：如何让商品加入购物车时，图片能够慢慢移动到购物车，然后变小，最后消失。其中，我用到了animate函数实现这个过程。要实现这个功能的难点在于：图片要怎么移动，怎么变化。
接下来讲解如何实现这个过程：

1）首先需要获取到商品的图片，然后将获取到的图片复制一份；

[javascript] view plain copy

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

2）得到商品图片的top和left值，购物车的top和left值，这样才可以通过animate函数实现移动；

[javascript] view plain copy

1. var imgtop = img.offset().top;  
2. var imgleft = img.offset().left;  
3.   
4. var cartop = $("#godcar").offset().top;  
5. var carleft = $("#godcar").offset().left;  

3）编写animate函数，实现具体的效果；

[javascript] view plain copy

1. cimg.appendTo($("body")).css({  
2.                 "position": "absolute",//绝对定位  
3.                 "opacity": "0.7",  
4.                 "top": imgtop,  
5.                 "left": imgleft  
6.             }).animate({  
7.                 "top": cartop,  
8.                 "left": carleft,  
9.                 "width": "40px",  
10.                 "height": "40px",  
11.                 "opacity": "0.3"   //透明度  
12.             }, 1000, function () {  
13.                 cimg.remove(); //图片消失  
14.                 $(".dnum").text(i); //购物车数量变化  
15.             });  

     简单的移动和变化就实现了。

     但是后面又想，每次刷新购物车的数量重新归0好像不符合事实，于是就想着如何实现刷新页面时，不让购物车的数量发生变化，查了资料，总结了三种方法：

（1）保存到数据库；

（2）通过cookie方法；

（3）通过h5的localStorage方法；

     最后我决定采用第三种方法，因为想试试h5的新方法（出于好奇心理~~，也是因为刚好看到这个方法，就试试看），localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。我的代码具体实现：localStorage.getItem。
  

     好了，所有该讲的都讲完了，附上jq的所有代码，喜欢的就点个赞：

[javascript] view plain copy

1. var i = 0;  
2. $(function(){  
3.     var inum = 0;  
4.     if(localStorage.getItem("inum")!==null){  
5.         inum = localStorage.getItem("inum");  
6.     }  
7.     $(".dnum").text(inum);  
8.   
9.     $(".godadd").click(function(){  
10.         if (!$(this).find("a").hasClass("bg")) {  
11.             i++;  
12.             $(this).find("a").addClass("bg");  
13.             var img = $(this).parent().find(".godpic").find("img");  
14.             var cimg = img.clone();  
15.   
16.             var imgtop = img.offset().top;  
17.             var imgleft = img.offset().left;  
18.   
19.             var cartop = $("#godcar").offset().top;  
20.             var carleft = $("#godcar").offset().left;  
21.   
22.             cimg.appendTo($("body")).css({  
23.                 "position": "absolute",  
24.                 "opacity": "0.7",  
25.                 "top": imgtop,  
26.                 "left": imgleft  
27.             }).animate({  
28.                 "top": cartop,  
29.                 "left": carleft,  
30.                 "width": "40px",  
31.                 "height": "40px",  
32.                 "opacity": "0.3"  
33.             }, 1000, function () {  
34.                 cimg.remove();  
35.                 $(".dnum").text(i);  
36.                 localStorage.setItem("inum", i);  
37.             });  
38.         }  
39.   
40.     });  
41. });