HTML如何实现简易购物车

今天小编给大家分享一下html如何实现简易购物车的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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

　　<pid="Goods">

　　<pclass="goodsItem">

　　<ulclass="goditem">

　　<liclass="godpic"><imgsrc="images/1.png"></li>

　　<liclass="godprice">￥25.00</li>

　　<liclass="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗集最早由郑振铎先生译介到中国。</li>

　　<liclass="godadd"><ahref="javascript:;">加入购物车</a></li>

　　</ul>

　　</p>

　　<pclass="goodsItem">

　　<ulclass="goditem">

　　<liclass="godpic"><imgsrc="images/2.png"></li>

　　<liclass="godprice">￥56.00</li>

　　<liclass="godinfo">本书主要介绍了如何使用现有的WEB相关技术构建Android应用程序。</li>

　　<liclass="godadd"><ahref="javascript:;">加入购物车</a></li>

　　</ul>

　　</p>

　　<pclass="goodsItem">

　　<ulclass="goditem">

　　<liclass="godpic"><imgsrc="images/3.png"></li>

　　<liclass="godprice">￥37.00</li>

　　<liclass="godinfo">用文字打败时间。冯唐最畅销作品，杂文才是其销量最好、最受欢迎的作品。</li>

　　<liclass="godadd"><ahref="javascript:;">加入购物车</a></li>

　　</ul>

　　</p>

　　<pclass="goodsItem">

　　<ulclass="goditem">

　　<liclass="godpic"><imgsrc="images/1.png"></li>

　　<liclass="godprice">￥25.00</li>

　　<liclass="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗集最早由郑振铎先生译介到中国。</li>

　　<liclass="godadd"><ahref="javascript:;">加入购物车</a></li>

　　</ul>

　　</p>

　　<pclass="goodsItem">

　　<ulclass="goditem">

　　<liclass="godpic"><imgsrc="images/2.png"></li>

　　<liclass="godprice">￥56</li>

　　<liclass="godinfo">本书主要介绍了如何使用现有的Web相关技术构建Android应用程序。</li>

　　<liclass="godadd"><ahref="javascript:;">加入购物车</a></li>

　　</ul>

　　</p>

　　<pclass="goodsItem">

　　<ulclass="goditem">

　　<liclass="godpic"><imgsrc="images/3.png"></li>

　　<liclass="godprice">￥37.00</li>

　　<liclass="godinfo">用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。</li>

　　<liclass="godadd"><ahref="javascript:;">加入购物车</a></li>

　　</ul>

　　</p>

　　</p>

　　<pid="godcar">

　　<pclass="dnum">0</p>

　　<pclass="dcar">

　　<imgsrc="images/car.jpg">

　　</p>

　　</p>

　　其中涉及到一个知识点：在

　　<liclass="godadd"><ahref="javascript:;">加入购物车</a></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: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频道。