HTML代碼完成簡(jiǎn)易購(gòu)物車

1、用html實(shí)現(xiàn)內(nèi)容；

2、用css修飾外觀；

3、用js(jq)設(shè)計(jì)動(dòng)效。

第一步：首先是進(jìn)行html頁(yè)面的設(shè)計(jì)，我用一個(gè)大的p將所有商品包含，然后用不同的p將不同的商品進(jìn)行封裝，商品列表中我用了ul li實(shí)現(xiàn)，具體實(shí)現(xiàn)代碼如下（代碼中涉及到的商品都是網(wǎng)上隨便copy的，不具有參考價(jià)值）：

<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">《飛鳥(niǎo)集》中很多詩(shī)歌是用孟加拉文創(chuàng)作的，這部詩(shī)集最早由鄭振鐸先生譯介到中國(guó)。</li>
                <li class="godadd"><a href="javascript:;">加入購(gòu)物車</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">本書(shū)主要介紹了如何使用現(xiàn)有的Web 相關(guān)技術(shù)構(gòu)建Android 應(yīng)用程序。</li>
                <li class="godadd"><a href="javascript:;">加入購(gòu)物車</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">用文字打敗時(shí)間。馮唐最暢銷作品，雜文才是其銷量最好、最受歡迎的作品。</li>
                <li class="godadd"><a href="javascript:;">加入購(gòu)物車</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">《飛鳥(niǎo)集》中很多詩(shī)歌是用孟加拉文創(chuàng)作的，這部詩(shī)集最早由鄭振鐸先生譯介到中國(guó)。</li>
                <li class="godadd"><a href="javascript:;">加入購(gòu)物車</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">本書(shū)主要介紹了如何使用現(xiàn)有的Web 相關(guān)技術(shù)構(gòu)建Android 應(yīng)用程序。</li>
                <li class="godadd"><a href="javascript:;">加入購(gòu)物車</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">用文字打敗時(shí)間。馮唐最暢銷作品,雜文才是其銷量最好、最受歡迎的作品。</li>
                <li class="godadd"><a href="javascript:;">加入購(gòu)物車</a></li>
            </ul>
        </p>
    </p>

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

其中涉及到一個(gè)知識(shí)點(diǎn)：在

<li class="godadd"><a href="javascript:;">加入購(gòu)物車</a></li>

中，我用到了javascript:;這個(gè)的意思表示不進(jìn)行跳轉(zhuǎn)，執(zhí)行一個(gè)空事件。

第二步：進(jìn)行外觀設(shè)計(jì)，為了更好的顯示，我將包含每個(gè)商品列表的p設(shè)置了width和height,以及border,值得注意的是，我為了讓購(gòu)物車固定在某個(gè)位置，將其position設(shè)置為fixed，然后通過(guò)設(shè)置top和left讓其固定在你想要的位置上。另外，要學(xué)會(huì)靈活使用margin和padding，讓顯示更美觀。

注意：如果想給行內(nèi)元素設(shè)置width和height或者其他塊級(jí)元素的屬性，那么需要設(shè)置display:block才可以。
具體設(shè)計(jì)代碼如下：

* {
    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;
}

第一個(gè)*表示為所有元素設(shè)置屬性，在一開(kāi)始就設(shè)置margin和padding是一個(gè)很好的習(xí)慣。

第三步：實(shí)現(xiàn)了靜態(tài)頁(yè)面，接下來(lái)需要通過(guò)jq進(jìn)行購(gòu)物車具體的實(shí)現(xiàn)，比如加入購(gòu)物車，購(gòu)物車數(shù)量變化等。我花了一些時(shí)間在設(shè)計(jì)：如何讓商品加入購(gòu)物車時(shí)，圖片能夠慢慢移動(dòng)到購(gòu)物車，然后變小，最后消失。其中，我用到了animate函數(shù)實(shí)現(xiàn)這個(gè)過(guò)程。要實(shí)現(xiàn)這個(gè)功能的難點(diǎn)在于：圖片要怎么移動(dòng)，怎么變化。
接下來(lái)講解如何實(shí)現(xiàn)這個(gè)過(guò)程：

1）首先需要獲取到商品的圖片，然后將獲取到的圖片復(fù)制一份；

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

2）得到商品圖片的top和left值，購(gòu)物車的top和left值，這樣才可以通過(guò)animate函數(shù)實(shí)現(xiàn)移動(dòng)；

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

var cartop = $("#godcar").offset().top;
var carleft = $("#godcar").offset().left;

3）編寫(xiě)animate函數(shù)，實(shí)現(xiàn)具體的效果；

cimg.appendTo($("body")).css({
                "position": "absolute",//絕對(duì)定位
                "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); //購(gòu)物車數(shù)量變化
            });

簡(jiǎn)單的移動(dòng)和變化就實(shí)現(xiàn)了。

但是后面又想，每次刷新購(gòu)物車的數(shù)量重新歸0好像不符合事實(shí)，于是就想著如何實(shí)現(xiàn)刷新頁(yè)面時(shí)，不讓購(gòu)物車的數(shù)量發(fā)生變化，查了資料，總結(jié)了三種方法：

（1）保存到數(shù)據(jù)庫(kù)；

（2）通過(guò)cookie方法；

（3）通過(guò)h5的localStorage方法；

最后我決定采用第三種方法，因?yàn)橄朐囋噃5的新方法（出于好奇心理~~，也是因?yàn)閯偤每吹竭@個(gè)方法，就試試看），localStorage 方法存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。我的代碼具體實(shí)現(xiàn)：localStorage.getItem。

好了，所有該講的都講完了，附上jq的所有代碼，喜歡的就點(diǎn)個(gè)贊：

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

    });
});

最終效果圖：

聰明的你學(xué)會(huì)了嗎，趕快實(shí)踐起來(lái)吧！

以上就是HTML代碼實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！