网上关于购物车实现的代码非常多，今天看了一些知识点，决定自己动手写写，于是写了一个简易购物车，接下来讲解一下具体的实现。
1、用html实现内容；
2、用css修饰外观；
3、用js(jq)设计动效。
网上关于购物车实现的代码非常多，今天看了一些知识点，决定自己动手写写，于是写了一个简易购物车，接下来讲解一下具体的实现。
1、用html实现内容；
2、用css修饰外观；
3、用js(jq)设计动效。
<div id="godcar">
<div class="dnum">0
其中涉及到一个知识点：在
中，我用到了javascript:;这个的意思表示不进行跳转，执行一个空事件。注：如果想给行内元素设置width和height或者其他块级元素的属性，那么需要设置display:block才可以。
具体设计代码如下：
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;
}
position: fixed;
right: 0px;
top:40%;
width: 72px;
height: 64px;
}
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是一个很好的习惯。
接下来讲解如何实现这个过程：
2）得到商品图片的top和left值，购物车的top和left值，这样才可以通过animate函数实现移动；var imgtop = img.offset().top;
3）编写animate函数，实现具体的效果； cimg.appendTo($("body")).css({
简单的移动和变化就实现了。
但是后面又想，每次刷新购物车的数量重新归0好像不符合事实，于是就想着如何实现刷新页面时，不让购物车的数量发生变化，查了资料，总结了三种方法：
（1）保存到数据库； （2）通过cookie方法； （3）通过h5的localStorage方法；
最后我决定采用第三种方法，因为想试试h5的新方法（出于好奇心理~~，也是因为刚好看到这个方法，就试试看），localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。我的代码具体实现：localStorage.getItem。
好了，所有该讲的都讲完了，附上jq的所有代码，喜欢的就点个赞：
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","opacity": "0.3"
},function () {
cimg.remove();
$(".dnum").text(i);
localStorage.setItem("inum",i);
});
}
});
});
效果图：
原文链接：https://www.f2er.com/js/45792.html