一、
淘寶購物車
代碼：
1.html文件
<title>淘寶購物車頁面</title>
<link href="css/myCart.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){ productCount(); //isAllChecked();$ ("#allCheckBox").click(function(){
var checked = $(this).is(":checked"); //alert(checked); //$ (".cart_td_1").children().removeAttr("checked");
$(".cart_td_1").children().prop("checked",checked);
});

        //單選判斷
        $(".cart_td_1").children().click(function(){                
            isAllChecked();
        });
        //減少數(shù)量
        $(".cart_td_6").children("img[alt='minus']").click(function(){
            productNum(this,true);
        });
        //增加數(shù)量
        $(".cart_td_6").children("img[alt='add']").click(function(){
            productNum(this,false);
        });
        //單擊刪除
        $(".cart_td_8").click(function(){
            var spEl = $(this).parent();
            var name = spEl.attr("name");
            var len = $(this).parent().siblings("tr[id][name='"+name+"']").length;
            if(len>0){
                //不能刪除店鋪
                spEl.remove();
            }else{
                //刪除店鋪
                spEl.prev().remove();
                spEl.remove();
            }
            productCount();
        });
        //刪除所選
        $("#deleteAll").click(function(){
            //對商品列表遍歷
            $("tr[id]").each(function(i,e){
                var isChecked = $(e).children(".cart_td_1").children().is(":checked");
                if(isChecked){
                    var name = $(e).attr("name");
                    var len = $(e).siblings("tr[id][name='"+name+"']").length;
                    if(len>0){
                        //不能刪除店鋪
                        $(e).remove();
                    }else{
                        //刪除店鋪
                        $(e).prev().remove();
                        $(e).remove();
                    }
                }
            });
            productCount();
        });
    }); 
    //計(jì)算總價(jià)與小計(jì)
    function productCount(){
        var productTr = $("#shopping").find("tr[id]");
        var totalPrice=0;
        var totalScore=0;
        productTr.each(function(i,e){           
            var num=$(e).children(".cart_td_6").children("input").val();                
            var price=$(e).children(".cart_td_5").text();
            var sum = num*price;
            var score=$(e).children(".cart_td_4").text()*num;   
            $(e).children(".cart_td_7").text(sum);              
            
            totalPrice+=sum;
            totalScore+=score;
        });
        $("#total").text(totalPrice);
        $("#integral").text(totalScore);
    }
    //判斷是否全選
    function isAllChecked(){
        var checkBOxs = $(".cart_td_1").children();
        var sum = checkBOxs.length;
        var k=0;
        checkBOxs.each(function(i,e){
            if($(e).is(":checked")) k++;
        });
        if(sum==k){
            $("#allCheckBox").prop("checked",true);
        }else{
            $("#allCheckBox").prop("checked",false);    
        }           
    }
    //商品增加減少，flag為true時(shí)增加，flag為false時(shí)減少
    function productNum(dom,flag){
        var inputEl = $(dom).siblings("input");
        var v = inputEl.val();
        if(flag==true){
            //減少數(shù)量
            if(v<=1){
                alert("商品數(shù)量至少為一件");
                v = 1;
            }else{
                v--;
            }
        }else{
            //增加數(shù)量
            v++;
        }
        inputEl.val(v);
        productCount();
    }
</script>

</head>
<body>
<div id="header"><img src="images/taobao_logo.gif" alt="logo" /></div>
<div id="nav">您的位置：<a href="#">首頁</a> > <a href="#">我的淘寶</a> > 我的購物車</div>
<div id="navlist">
<ul>
<li class="navlist_red_left"></li>
<li class="navlist_red">1. 查看購物車</li>
<li class="navlist_red_arrow"></li>
<li class="navlist_gray">2. 確認(rèn)訂單信息</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">3. 付款到支付寶</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">4. 確認(rèn)收貨</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">5. 評(píng)價(jià)</li>
<li class="navlist_gray_right"></li>
</ul>
</div>

<div id="content">
<form action="" method="post" name="myform">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
<tr>
<td class="title_1">
<input id="allCheckBox" type="checkbox" value=""/>全選
</td>
<td class="title_2" colspan="2">店鋪寶貝</td>
<td class="title_3">獲積分</td>
<td class="title_4">單價(jià)（元）</td>
<td class="title_5">數(shù)量</td>
<td class="title_6">小計(jì)（元）</td>
<td class="title_7">操作</td>
</tr>
<tr>
<td colspan="8" class="line"></td>
</tr>
<tr name="shop01">
<td colspan="8" class="shopInfo">店鋪：<a href="#">纖巧百媚時(shí)尚鞋坊</a> 賣家：<a href="#">纖巧百媚</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
</tr>
<tr id="product1" name="shop01">
<td class="cart_td_1">
<input name="cartCheckBox" type="checkbox" value="product1"/>
</td>
<td class="cart_td_2">
<img src="images/taobao_cart_01.jpg" alt="shopping"/>
</td>
<td class="cart_td_3">
<a href="#">日韓流行風(fēng)時(shí)尚美眉最愛獨(dú)特米字拼圖金屬坡跟公主靴子黑色</a><br />
顏色：棕色尺碼：37<br />
保障：<img src="images/taobao_icon_01.jpg" alt="icon" />
</td>
<td class="cart_td_4">5</td>
<td class="cart_td_5">138.00</td>
<td class="cart_td_6">
<img src="images/taobao_minus.jpg" alt="minus" class="hand"/>
<input id="num_1" type="text" value="1" class="num_input" readonly="readonly"/>
<img src="images/taobao_adding.jpg" alt="add" class="hand"/>
</td>
<td class="cart_td_7"></td>
<td class="cart_td_8"><a href="javascript:void(0);">刪除</a></td>
</tr>

        <tr name="shop02">
            <td colspan="8" class="shopInfo">店鋪：<a href="#">香港我的美麗日記</a>    賣家：<a href="#">lokemick2009</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
        </tr>
        <tr id="product2" name="shop02">
            <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" /></td>
            <td class="cart_td_2"><img src="images/taobao_cart_02.jpg" alt="shopping"/></td>
            <td class="cart_td_3"><a href="#">chanel/香奈爾/香奈爾炫亮魅力唇膏3.5g</a><br />
                保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
            <td class="cart_td_4">12</td>
            <td class="cart_td_5">265.00</td>
            <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_2" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
            <td class="cart_td_7"></td>
            <td class="cart_td_8"><a href="javascript:void(0);">刪除</a></td>
        </tr>

        <tr name="shop03">
            <td colspan="8" class="shopInfo">店鋪：<a href="#">實(shí)體經(jīng)營</a>    賣家：<a href="#">林顏店鋪</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
        </tr>
        <tr id="product3" name="shop03">
            <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3"/></td>
            <td class="cart_td_2"><img src="images/taobao_cart_03.jpg" alt="shopping"/></td>
            <td class="cart_td_3"><a href="#">蝶妝海?藍(lán)清瀅粉底液10#（象牙白）</a><br />
                保障：<img src="images/taobao_icon_01.jpg" alt="icon" /> <img src="images/taobao_icon_02.jpg" alt="icon" /></td>
            <td class="cart_td_4">3</td>
            <td class="cart_td_5">85.00</td>
            <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_3" type="text"  value="1" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
            <td class="cart_td_7"></td>
            <td class="cart_td_8"><a href="javascript:void(0);">刪除</a></td>
        </tr>

        <tr name="shop04">
            <td colspan="8" class="shopInfo">店鋪：<a href="#">紅豆豆的小屋</a>    賣家：<a href="#">taobao豆豆</a> <img src="images/taobao_relation.jpg" alt="relation" /></td>
        </tr>
        <tr id="product4" name="shop04">
            <td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4"/></td>
            <td class="cart_td_2"><img src="images/taobao_cart_04.jpg" alt="shopping"/></td>
            <td class="cart_td_3"><a href="#">相宜促銷專供 大S推薦 最好用的LilyBell化妝棉</a><br />
                保障：<img src="images/taobao_icon_01.jpg" alt="icon" /></td>
            <td class="cart_td_4">12</td>
            <td class="cart_td_5">12.00</td>
            <td class="cart_td_6"><img src="images/taobao_minus.jpg" alt="minus" class="hand"/> <input id="num_4" type="text"  value="2" class="num_input" readonly="readonly"/> <img src="images/taobao_adding.jpg" alt="add" class="hand"/></td>
            <td class="cart_td_7"></td>
            <td class="cart_td_8"><a href="javascript:void(0);">刪除</a></td>
        </tr>

        <tr>
            <td  colspan="3"><a id="deleteAll" href="javascript:void(0);"><img src="images/taobao_del.jpg" alt="delete"/></a></td>
            <td colspan="5" class="shopend">商品總價(jià)（不含運(yùn)費(fèi)）：<label id="total" class="yellow"></label> 元<br />
                可獲積分 <label class="yellow" id="integral"></label> 點(diǎn)<br />
                <input name=" " type="image" src="images/taobao_subtn.jpg" /></td>
        </tr>        
    </table>
</form>

</div>
</body>
</html>

   2.CSS文件

body{
margin:0px;
padding:0px;
font-size:12px;
line-height:20px;
color:#333;
}
ul,li,ol,h1,dl,dd{
list-style:none;
margin:0px;
padding:0px;
}
a{
color:#1965b3;
text-decoration: none;
}
a:hover{
color:#CD590C;
text-decoration:underline;
}
img{
border:0px;
vertical-align:middle;
}

header{

height:40px;
margin:10px auto 10px auto;
width:800px;
clear:both;
}

nav{

margin:10px auto 10px auto;
width:800px;
clear:both;
}

navlist{

width:800px;
margin:0px auto 0px auto;
height:23px;
}
#navlist li{
    float:left;
    height:23px;
    line-height:26px;
}
.navlist_red_left{
    background-image:url(../images/taobao_bg.png);
    background-repeat:no-repeat;
    background-position:-12px -92px;
    width:3px;
    }
.navlist_red{
    background-color:#ff6600;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    color:#FFF;
    width:130px;
    }
.navlist_red_arrow{
    background-color:#ff6600;
    background-image:url(../images/taobao_bg.png);
    background-repeat:no-repeat;
    background-position:0px 0px;
    width:13px;
    }
.navlist_gray{
    background-color:#e4e4e4;
    text-align:center;
    font-size:14px;
    font-weight:bold;
    width:150px;
    }
.navlist_gray_arrow{
    background-color:#e4e4e4;
    background-image:url(../images/taobao_bg.png);
    background-repeat:no-repeat;
    background-position:0px 0px;
    width:13px;
    }
.navlist_gray_right{
    background-image:url(../images/taobao_bg.png);
    background-repeat:no-repeat;
    background-position:-12px -138px;
    width:3px;
    }

content{

width:800px;
margin:10px auto 5px auto;
clear:both;
}
.title_1{
    text-align:center;
    width:50px;
    }
.title_2{
    text-align:center;
    }
.title_3{
    text-align:center;
    width:80px;
    }
.title_4{
    text-align:center;
    width:80px;
    }
.title_5{
    text-align:center;
    width:100px;
    }
.title_6{
    text-align:center;
    width:80px;
    }
.title_7{
    text-align:center;
    width:60px;
    }
.line{
    background-color:#a7cbff;
    height:3px;
    }
.shopInfo{
    padding-left:10px;
    height:35px;
    vertical-align:bottom;
    }
.num_input{
    border:solid 1px #666;
    width:25px;
    height:15px;
    text-align:center;
    }
.cart_td_1,.cart_td_2,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7,.cart_td_8{
    background-color:#e2f2ff;
    border-bottom:solid 1px #d1ecff;
    border-top:solid 1px #d1ecff;
    text-align:center;
    padding:5px;
    }
.cart_td_1,.cart_td_3,.cart_td_4,.cart_td_5,.cart_td_6,.cart_td_7{
    border-right:solid 1px #FFF;
    }
.cart_td_3{
    text-align:left;
    }
.cart_td_4{
    font-weight:bold;
    }
.cart_td_7{
    font-weight:bold;
    color:#fe6400;
    font-size:14px;
    }
.hand{
    cursor:pointer;
    }

.shopend{
text-align:right;
padding-right:10px;
padding-bottom:10px;
}
.yellow{
font-weight:bold;
color:#fe6400;
font-size:18px;
line-height:40px;
}

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

2019-12-10

2019-12-10

header{

nav{

navlist{

content{

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

2019-12-10

header{

nav{

navlist{

content{

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av