網(wǎng)上關(guān)于購物車實現(xiàn)的代碼非常多另萤，本次的這篇文章主要是和大家分享了HTML代碼實現(xiàn)簡易購物車，有需要的小伙伴可以看一下蒋失，接下來講解一下具體的實現(xiàn)。
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的，不具有參考價值）：
web前端全棧資料粉絲福利（面試題儡陨、視頻褪子、資料筆記量淌、進(jìn)階路線）
<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">《飛鳥集》中很多詩歌是用孟加拉文創(chuàng)作的，這部詩集最早由鄭振鐸先生譯介到中國嫌褪。</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">本書主要介紹了如何使用現(xiàn)有的Web 相關(guān)技術(shù)構(gòu)建Android 應(yīng)用程序呀枢。</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">《飛鳥集》中很多詩歌是用孟加拉文創(chuàng)作的缨伊，這部詩集最早由鄭振鐸先生譯介到中國摘刑。</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">本書主要介紹了如何使用現(xiàn)有的Web 相關(guān)技術(shù)構(gòu)建Android 應(yīng)用程序。</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:;這個的意思表示不進(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)容脱拼，更多請關(guān)注我瞒瘸！
