網(wǎng)上關(guān)于購(gòu)物車實(shí)現(xiàn)的代碼非常多柳沙，本次的這篇文章主要是和大家分享了HTML代碼實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車，有需要的小伙伴可以看一下妓柜，接下來講解一下具體的實(shí)現(xiàn)箱季。
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à)值）：
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">《飛鳥集》中很多詩(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">本書主要介紹了如何使用現(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">《飛鳥集》中很多詩(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">本書主要介紹了如何使用現(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)：在
1<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涧狮，然后通過設(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è)置屬性钢颂，在一開始就設(shè)置margin和padding是一個(gè)很好的習(xí)慣。
第三步：實(shí)現(xiàn)了靜態(tài)頁(yè)面拜银，接下來需要通過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è)過程。要實(shí)現(xiàn)這個(gè)功能的難點(diǎn)在于：圖片要怎么移動(dòng)救鲤，怎么變化久窟。
接下來講解如何實(shí)現(xiàn)這個(gè)過程：
1）首先需要獲取到商品的圖片，然后將獲取到的圖片復(fù)制一份本缠；
varimg = $(this).parent().find(".godpic").find("img");
varcimg = img.clone();
2）得到商品圖片的top和left值斥扛，購(gòu)物車的top和left值，這樣才可以通過animate函數(shù)實(shí)現(xiàn)移動(dòng)丹锹；
varimgtop = img.offset().top;
varimgleft = img.offset().left;
varcartop = $("#godcar").offset().top;
varcarleft = $("#godcar").offset().left;
3）編寫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"http://透明度
????????????}, 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）通過cookie方法张肾；
（3）通過h5的localStorage方法；
最后我決定采用第三種方法锚扎，因?yàn)橄朐囋噃5的新方法（出于好奇心理~~吞瞪，也是因?yàn)閯偤每吹竭@個(gè)方法，就試試看）驾孔，localStorage 方法存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制芍秆。第二天、第二周或下一年之后翠勉，數(shù)據(jù)依然可用妖啥。我的代碼具體實(shí)現(xiàn)：localStorage.getItem。
好了对碌，所有該講的都講完了荆虱，附上jq的所有代碼，喜歡的就點(diǎn)個(gè)贊：
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);
????????????});
????????}
????});
});
最終效果圖：
聰明的你學(xué)會(huì)了嗎朽们，趕快實(shí)踐起來吧怀读！
以上就是HTML代碼實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注我Ｆ锿选菜枷！
