2019-12-10

一统舀、
淘寶購物車
代碼：
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();
        });
    }); 
    //計算總價與小計
    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時增加仆抵，flag為false時減少
    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. 確認訂單信息</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">3. 付款到支付寶</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">4. 確認收貨</li>
<li class="navlist_gray_arrow"></li>
<li class="navlist_gray">5. 評價</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">單價（元）</td>
<td class="title_5">數(shù)量</td>
<td class="title_6">小計（元）</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="#">纖巧百媚時尚鞋坊</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="#">日韓流行風時尚美眉最愛獨特米字拼圖金屬坡跟公主靴子黑色</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="#">實體經(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="#">蝶妝海?藍清瀅粉底液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">商品總價（不含運費）：<label id="total" class="yellow"></label> 元<br />
                可獲積分 <label class="yellow" id="integral"></label> 點<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;
}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末榔至，一起剝皮案震驚了整個濱河市诱鞠，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌奢入，老刑警劉巖筝闹，帶你破解...
沈念sama閱讀 219,490評論 6贊 508
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡关顷，警方通過查閱死者的電腦和手機糊秆，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,581評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來议双，“玉大人痘番，你說我怎么就攤上這事×祝” “怎么了夫偶？”我有些...
開封第一講書人閱讀 165,830評論 0贊 356
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵界睁，是天一觀的道長觉增。經(jīng)常有香客問我，道長翻斟，這世上最難降的妖魔是什么逾礁？我笑而不...
開封第一講書人閱讀 58,957評論 1贊 295
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮访惜，結(jié)果婚禮上嘹履，老公的妹妹穿的比我還像新娘。我一直安慰自己债热，他們只是感情好砾嫉，可當我...
茶點故事閱讀 67,974評論 6贊 393
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著窒篱，像睡著了一般焕刮。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上墙杯，一...
開封第一講書人閱讀 51,754評論 1贊 307
城市分裂傳說
那天配并，我揣著相機與錄音，去河邊找鬼高镐。笑死溉旋，一個胖子當著我的面吹牛，可吹牛的內(nèi)容都是我干的嫉髓。我是一名探鬼主播观腊，決...
沈念sama閱讀 40,464評論 3贊 420
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼算行！你這毒婦竟也來了进泼？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 39,357評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤膳叨，失蹤者是張志新（化名）和其女友劉穎间景，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,847評論 1贊 317
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡迄委，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,995評論 3贊 338
?白月光啟示錄
正文我和宋清朗相戀三年褐筛，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片叙身。...
茶點故事閱讀 40,137評論 1贊 351
活死人
序言：一個原本活蹦亂跳的男人離奇死亡渔扎，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出信轿，到底是詐尸還是另有隱情晃痴，我是刑警寧澤，帶...
沈念sama閱讀 35,819評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布财忽，位于F島的核電站倘核，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏即彪。R本人自食惡果不足惜紧唱，卻給世界環(huán)境...
茶點故事閱讀 41,482評論 3贊 331
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望隶校。院中可真熱鬧漏益，春花似錦、人聲如沸深胳。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,023評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽舞终。三九已至轻庆，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間权埠，已是汗流浹背榨了。一陣腳步聲響...
開封第一講書人閱讀 33,149評論 1贊 272
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留攘蔽，地道東北人龙屉。一個月前我還...
沈念sama閱讀 48,409評論 3贊 373
代替公主和親
正文我出身青樓，卻偏偏與公主長得像满俗，于是被迫代替她去往敵國和親转捕。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 45,086評論 2贊 355

2019-12-10

header{

nav{

navlist{

content{

推薦閱讀更多精彩內(nèi)容