HTML代码实现简易购物车

1、用html实现内容；

2、用css修饰外观；

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

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

 p id= goods  p >
 其中涉及到一个知识点：在 
 li >
中，我用到了javascript:;这个的意思表示不进行跳转，执行一个空事件。
 第二步：进行外观设计，为了更好的显示，我将包含每个商品列表的p设置了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 }).animate({ top : cartop, 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 }).animate({ top : cartop, left : carleft, width : 40px , height : 40px , opacity : 0.3  }, 1000, function () { cimg.remove(); $( .dnum ).text(i); localStorage.setItem( inum , i);});
最终效果图：

聪明的你学会了吗，赶快实践起来吧！
以上就是HTML代码实现简易购物车的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。