HTML代码实现简易购物车

向右看齐 2023-02-24 13:24 25阅读 0赞

网上关于购物车实现的代码非常多，本次的这篇文章主要是和大家分享了HTML代码实现简易购物车，有需要的小伙伴可以看一下，接下来讲解一下具体的实现。

**1、用html实现内容；**

**2、用css修饰外观；**

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

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

**[打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）][web]**

> 
> 
>         
> 
>             <ul class="goditem">
> 
>                 <li class="godpic"><img src="images/1.png"></li>
> 
>                 <li class="godprice">￥25.00</li>
> 
>                 <li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗集最早由郑振铎先生译介到中国。</li>
> 
>                 <li class="godadd"><a href="javascript:;">加入购物车</a></li>
> 
>             </ul>
> 
>         
> 
>         
> 
>             <ul class="goditem">
> 
>                 <li class="godpic"><img src="images/2.png"></li>
> 
>                 <li class="godprice">￥56.00</li>
> 
>                 <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
> 
>                 <li class="godadd"><a href="javascript:;">加入购物车</a></li>
> 
>             </ul>
> 
>         
> 
>         
> 
>             <ul class="goditem">
> 
>                 <li class="godpic"><img src="images/3.png"></li>
> 
>                 <li class="godprice">￥37.00</li>
> 
>                 <li class="godinfo">用文字打败时间。冯唐最畅销作品，杂文才是其销量最好、最受欢迎的作品。</li>
> 
>                 <li class="godadd"><a href="javascript:;">加入购物车</a></li>
> 
>             </ul>
> 
>         
> 
>         
> 
>             <ul class="goditem">
> 
>                 <li class="godpic"><img src="images/1.png"></li>
> 
>                 <li class="godprice">￥25.00</li>
> 
>                 <li class="godinfo">《飞鸟集》中很多诗歌是用孟加拉文创作的，这部诗集最早由郑振铎先生译介到中国。</li>
> 
>                 <li class="godadd"><a href="javascript:;">加入购物车</a></li>
> 
>             </ul>
> 
>         
> 
>         
> 
>             <ul class="goditem">
> 
>                 <li class="godpic"><img src="images/2.png"></li>
> 
>                 <li class="godprice">￥56</li>
> 
>                 <li class="godinfo">本书主要介绍了如何使用现有的Web 相关技术构建Android 应用程序。</li>
> 
>                 <li class="godadd"><a href="javascript:;">加入购物车</a></li>
> 
>             </ul>
> 
>         
> 
>         
> 
>             <ul class="goditem">
> 
>                 <li class="godpic"><img src="images/3.png"></li>
> 
>                 <li class="godprice">￥37.00</li>
> 
>                 <li class="godinfo">用文字打败时间。冯唐最畅销作品,杂文才是其销量最好、最受欢迎的作品。</li>
> 
>                 <li class="godadd"><a href="javascript:;">加入购物车</a></li>
> 
>             </ul>
> 
>         
> 
>     
> 
>  
> 
>     
> 
>         0
> 
>         
> 
>             <img src="images/car.jpg">
> 
>         
> 
>

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

1<li class="godadd"><a href="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: 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）首先需要获取到商品的图片，然后将获取到的图片复制一份；

> 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）通过h5的localStorage方法；

最后我决定采用第三种方法，因为想试试h5的新方法（出于好奇心理~~，也是因为刚好看到这个方法，就试试看），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);
> 
>             \});
> 
>         \}
> 
>  
> 
>     \});
> 
> \});

最终效果图：

![format_png][]

聪明的你学会了吗，赶快实践起来吧！

以上就是HTML代码实现简易购物车的详细内容，更多请关注我！！

[web]: https://zhuanlan.zhihu.com/p/138726269
[format_png]: /images/20230209/1d7250a6a2a649c99b1182f3cc9b169c.png