HTML如何实现简易购物车

发布时间:2022-03-25 13:47:01 作者:iii
来源:亿速云 阅读:234

今天小编给大家分享一下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如何实现简易购物车”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. 购物车实现要点
  2. python怎么实现购物车

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html

上一篇:Typescript中boolean类型怎么用

下一篇:Typescript中number类型怎么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》