HTML如何实现简易购物车
今天小编给大家分享一下HTML如何实现简易购物车的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
成都创新互联长期为千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为盐湖企业提供专业的成都网站制作、网站设计，盐湖网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。
第一步：首先是进行html页面的设计，我用一个大的p将所有商品包含，然后用不同的p将不同的商品进行封装，商品列表中我用了ulli实现，具体实现代码如下（代码中涉及到的商品都是网上随便copy的，不具有参考价值）：
其中涉及到一个知识点：在
中，我用到了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:1pxsolid#ccc;
margin:5px;
}
#goods{
width:910px;
}
.goditem{
list-style:none;
}
.godpicimg{
display:block;
width:250px;
height:250px;
margin:0pxauto;
}
.godprice,.godinfo,.godadd{
display:block;
width:220px;
margin:0pxauto;
text-align:center;
}
.godprice{
font-size:20px;
color:#f00;
}
.godinfo{
text-align:center;
font-size:14px;
margin:10px0px;
}
.godadda{
display:block;
width:150px;
height:36px;
background-color:#fd6a01;
border-radius:10px;
margin:0pxauto;
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）首先需要获取到商品的图片，然后将获取到的图片复制一份；
varimg=$(this).parent().find(".godpic").find("img");
varcimg=img.clone();
2）得到商品图片的top和left值，购物车的top和left值，这样才可以通过animate函数实现移动；
varimgtop=img.offset().top;
varimgleft=img.offset().left;
varcartop=$("#godcar").offset().top;
varcarleft=$("#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）通过h6的localStorage方法；
最后我决定采用第三种方法，因为想试试h6的新方法（出于好奇心理~~，也是因为刚好看到这个方法，就试试看），localStorage方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。我的代码具体实现：localStorage.getItem。
好了，所有该讲的都讲完了，附上jq的所有代码，喜欢的就点个赞：
vari=0;
$(function(){
varinum=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");
varimg=$(this).parent().find(".godpic").find("img");
varcimg=img.clone();
varimgtop=img.offset().top;
varimgleft=img.offset().left;
varcartop=$("#godcar").offset().top;
varcarleft=$("#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如何实现简易购物车
URL分享：http://myzitong.com/article/pjjoph.html