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

2、用css修飾外觀；

3、用js(jq)設(shè)計動效。

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

 p id= goods  p >
 其中涉及到一個知識點：在 
 li >
中，我用到了javascript:;這個的意思表示不進(jìn)行跳轉(zhuǎn)，執(zhí)行一個空事件。
 第二步：進(jìn)行外觀設(shè)計，為了更好的顯示，我將包含每個商品列表的p設(shè)置了width和height,以及border,值得注意的是，我為了讓購物車固定在某個位置，將其position設(shè)置為fixed，然后通過設(shè)置top和left讓其固定在你想要的位置上。另外，要學(xué)會靈活使用margin和padding，讓顯示更美觀。
注意：如果想給行內(nèi)元素設(shè)置width和height或者其他塊級元素的屬性，那么需要設(shè)置display:block才可以。
具體設(shè)計代碼如下：
* { 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;}
 第一個*表示為所有元素設(shè)置屬性，在一開始就設(shè)置margin和padding是一個很好的習(xí)慣。

 第三步：實現(xiàn)了靜態(tài)頁面，接下來需要通過jq進(jìn)行購物車具體的實現(xiàn)，比如加入購物車，購物車數(shù)量變化等。我花了一些時間在設(shè)計：如何讓商品加入購物車時，圖片能夠慢慢移動到購物車，然后變小，最后消失。其中，我用到了animate函數(shù)實現(xiàn)這個過程。要實現(xiàn)這個功能的難點在于：圖片要怎么移動，怎么變化。
接下來講解如何實現(xiàn)這個過程：
1）首先需要獲取到商品的圖片，然后將獲取到的圖片復(fù)制一份；
 var img = $(this).parent().find( .godpic ).find( img  var cimg = img.clone();
2）得到商品圖片的top和left值，購物車的top和left值，這樣才可以通過animate函數(shù)實現(xiàn)移動；
var imgtop = img.offset().top;var imgleft = img.offset().left;var cartop = $( #godcar ).offset().top;var carleft = $( #godcar ).offset().left;
3）編寫animate函數(shù)，實現(xiàn)具體的效果；
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); //購物車數(shù)量變化 });
 簡單的移動和變化就實現(xiàn)了。
 但是后面又想，每次刷新購物車的數(shù)量重新歸0好像不符合事實，于是就想著如何實現(xiàn)刷新頁面時，不讓購物車的數(shù)量發(fā)生變化，查了資料，總結(jié)了三種方法：
（1）保存到數(shù)據(jù)庫；
（2）通過cookie方法；
（3）通過h5的localStorage方法；
 最后我決定采用第三種方法，因為想試試h5的新方法（出于好奇心理~~，也是因為剛好看到這個方法，就試試看），localStorage 方法存儲的數(shù)據(jù)沒有時間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。我的代碼具體實現(xiàn)：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);});
最終效果圖：

聰明的你學(xué)會了嗎，趕快實踐起來吧！
以上就是HTML代碼實現(xiàn)簡易購物車的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。