HTML代码实现简易购物车-百分百源码网

HTML代码实现简易购物车

发布时间：09/01 来源：未知浏览：关键词：

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

1、用html实现内容；

2、用css润饰外不雅；

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

第一步：第一是停止html页面的设计，我用一个大的p将所有商品包括，然后用不一样的p将不一样的商品停止封装，商品列表中我用了ul li实现，详细实现代码如下（代码中触及到的商品都是网上随意copy的，不具有参照价值）：

<p id="goods">
        <p class="goodsItem">
            <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>
        </p>
        <p class="goodsItem">
            <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>
        </p>
        <p class="goodsItem">
            <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>
        </p>
        <p class="goodsItem">
            <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>
        </p>
        <p class="goodsItem">
            <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>
        </p>
        <p class="goodsItem">
            <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>
        </p>
    </p>

    <p id="godcar">
        <p class="dnum">0</p>
        <p class="dcar">
            <img src="images/car.jpg">
        </p>
    </p>

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

<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）第一需要猎取到商品的图片，然后将猎取到的图片复制一份；

 var img = $(this).parent().find(".godpic").find("img");
 var cimg = img.clone();

2）得到商品图片的top和left值，购物车的top和left值，这样才可以通过animate函数实现移动；

var imgtop = img.offset().top;
var imgleft = img.offset().left;

var cartop = $("#godcar").offset().top;
var carleft = $("#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的所有代码，喜爱的就点个赞：

var i = 0;
$(function(){
    var inum = 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");
            var img = $(this).parent().find(".godpic").find("img");
            var cimg = img.clone();

            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",
                "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);
            });
        }

    });
});

终究结果图：