简单淘宝购物车
挺简陋的写法，其中哪里有问题请评论指出，一切为了变得更好，谢谢各位！
HTML部分：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>淘宝</title> 6 <link rel="stylesheet" type="text/css" href="css/taobao.css" /> 7 </head> 8 <link href="img/images/tb.icon.jpg" rel="shortcut icon" /> 9 <body onload="total()"> 10 <div class="page"> 11 <div class="page_1"> 12 <div class="logo"></div> 13 <p class="dh"> 14 <span>您的位置:</span> 15 <span><a href="#" class="a">首页</a></span> 16 <span>></span> 17 <span><a href="#" class="a">我的淘宝</a></span> 18 <span>></span> 19 <span>我的购物车</span> 20 </p> 21 <ul class="order"> 22 <li><div class="jt"></div><a href="#" style="color:white">1.查看购物车</a></li> 23 <li><div class="jt"></div><a href="#">2.确认订单信息</a></li> 24 <li><div class="jt"></div><a href="#">3.付款到支付宝</a></li> 25 <li><div class="jt"></div><a href="#">4.确认收货</a></li> 26 <li><a href="#">5.评价</a></li> 27 </ul> 28 <table class="list_group"> 29 <tr class="list1"> 30 <td class="w80"> 31 <lable><input type="radio" id="all"/>全选</lable> 32 </td> 33 <td class="w350">店铺宝贝</td> 34 <td class="w80">获积分</td> 35 <td class="w80">单价(元)</td> 36 <td class="w100">数量</td> 37 <td class="w80">小计(元)</td> 38 <td class="w80">操作</td> 39 </tr> 40 </table> 41 <div class="xian"></div> 42 <div class="k"> 43 <p class="shop"> 44 <span>店铺:</span> 45 <span><a href="#">纤巧百媚时尚鞋坊</a></span> 46 <span> 卖家:</span> 47 <span><a href="#">纤巧百媚</a></span> 48 <div class="lxw"></div> 49 </p> 50 <table class="tab1"> 51 <tr class="list"> 52 <td class="w80"><input type="checkbox" class="choose"/></td> 53 <td class="w350"> 54 <div class="cp1"></div> 55 <div class="cp1_z"> 56 <a href="#"> 57 <h2 class="t1">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</h2> 58 </a> 59 <h2 class="t1">颜色:棕色 尺码:37</h2> 60 <h2 class="t1">保障:</h2><div class="logo_1"></div> 61 </div> 62 </td> 63 <td class="w80_1" name="5">5</td> 64 <td class="w80_2">138.00</td> 65 <td class="w100"> 66 <button class="j1">-</button> 67 <input class="doc" value="1"/> 68 <button class="j2">+</button> 69 </td> 70 <td class="w80_3">138</td> 71 <td class="w80 clear"><a href="#">删除</a></td> 72 </tr> 73 </table> 74 </div> 75 <div class="k"> 76 <p class="shop"> 77 <span>店铺:</span> 78 <span><a href="#">纤巧百媚时尚鞋坊</a></span> 79 <span> 卖家:</span> 80 <span><a href="#">纤巧百媚</a></span> 81 82 </p> 83 <div class="lxw"></div> 84 <table class="tab2"> 85 <tr class="list"> 86 <td class="w80"><input type="checkbox" class="choose"/></td> 87 <td class="w350"> 88 <div class="cp2"></div> 89 <div class="cp1_z"> 90 <a href="#"> 91 <h2 class="t1">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</h2> 92 </a> 93 <h2 class="t1">颜色:棕色 尺码:37</h2> 94 <h2 class="t1">保障:</h2><div class="logo_1"></div> 95 </div> 96 </td> 97 <td class="w80_1" name="12">12</td> 98 <td class="w80_2">265.00</td> 99 <td class="w100"> 100 <button class="j1">-</button> 101 <input class="doc" value="1"/> 102 <button class="j2">+</button> 103 </td> 104 <td class="w80_3">265</td> 105 <td class="w80 clear"><a href="#">删除</a></td> 106 </tr> 107 </table> 108 </div> 109 <div class="k"> 110 <p class="shop"> 111 <span>店铺:</span> 112 <span><a href="#">纤巧百媚时尚鞋坊</a></span> 113 <span> 卖家:</span> 114 <span><a href="#">纤巧百媚</a></span> 115 116 </p> 117 <div class="lxw"></div> 118 <table class="tab3"> 119 <tr class="list"> 120 <td class="w80"><input type="checkbox" class="choose"/></td> 121 <td class="w350"> 122 <div class="cp3"></div> 123 <div class="cp1_z"> 124 <a href="#"> 125 <h2 class="t1">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</h2> 126 </a> 127 <h2 class="t1">颜色:棕色 尺码:37</h2> 128 <h2 class="t1">保障:</h2><div class="logo_1"></div> 129 </div> 130 </td> 131 <td class="w80_1" name="3">3</td> 132 <td class="w80_2">85.00</td> 133 <td class="w100"> 134 <button class="j1">-</button> 135 <input class="doc" value="1"/> 136 <button class="j2">+</button> 137 </td> 138 <td class="w80_3">85</td> 139 <td class="w80 clear"><a href="#">删除</a></td> 140 </tr> 141 </table> 142 </div> 143 <div class="k"> 144 <p class="shop"> 145 <span>店铺:</span> 146 <span><a href="#">纤巧百媚时尚鞋坊</a></span> 147 <span> 卖家:</span> 148 <span><a href="#">纤巧百媚</a></span> 149 150 </p> 151 <div class="lxw"></div> 152 <table class="tab4"> 153 <tr class="list"> 154 <td class="w80"><input type="checkbox" class="choose"/></td> 155 <td class="w350"> 156 <div class="cp4"></div> 157 <div class="cp1_z"> 158 <a href="#"> 159 <h2 class="t1">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</h2> 160 </a> 161 <h2 class="t1">颜色:棕色 尺码:37</h2> 162 <h2 class="t1">保障:</h2><div class="logo_1"></div> 163 </div> 164 </td> 165 <td class="w80_1" name="12">12</td> 166 <td class="w80_2">12.00</td> 167 <td class="w100"> 168 <button class="j1">-</button> 169 <input class="doc" value="1"/> 170 <button class="j2">+</button> 171 </td> 172 <td class="w80_3">12</td> 173 <td class="w80 clear"><a href="#">删除</a></td> 174 </tr> 175 </table> 176 </div> 177 <button class="del" id="del">删除所选</button><br/> 178 <div class="right"> 179 <p class="money">商品总价(不含运费):<span class="mon">0</span>元</p><br/> 180 <p class="cen">可获积分:<span class="ce">0</span>点</p><br/> 181 <button class="pay">立刻购买</button> 182 </div> 183 </div> 184 </div> 185 <script src="js/taobao.js"></script> 186 </body> 187 </html>
css部分
1 *{ 2 margin:0; 3 padding:0; 4 } 5 body{ 6 width:100%; 7 /*height:1000px;*/ 8 background: #C4E3F3; 9 10 } 11 .page{ 12 width:1000px; 13 /*height:1000px;*/ 14 margin:0 auto; 15 background: white; 16 17 } 18 .page_1{ 19 width:856px; 20 /* height:1000px;*/ 21 margin:0 auto; 22 background: white; 23 overflow: hidden; 24 position: relative; 25 } 26 .logo{ 27 width:200px; 28 height:50px; 29 background-image: url("../img/images/taobao_logo.gif"); 30 background-size:100% 100%; 31 margin-top:5px; 32 } 33 .dh{ 34 margin-top:20px; 35 } 36 .a{ 37 text-decoration: none; 38 } 39 .order{ 40 list-style: none; 41 margin-top:10px; 42 } 43 .order li{ 44 float:left; 45 width:171px; 46 height:30px; 47 text-align: center; 48 line-height:30px; 49 background: #e4e4e4; 50 position: relative; 51 font-size:20px; 52 font-weight:bold; 53 } 54 .order li a{ 55 text-decoration: none; 56 color:black; 57 } 58 .order li:nth-child(1){ 59 border-radius:5px 0 0 5px; 60 width:180px; 61 background:#ff6600; 62 color:white; 63 } 64 .order li:nth-child(5){ 65 border-radius:0 5px 5px 0; 66 width:162px; 67 } 68 .jt{ 69 width:15px; 70 height:30px; 71 background-image: url("../img/images/jt.png"); 72 background-size:100% 100%; 73 position: absolute; 74 right:0; 75 } 76 .list_group{ 77 width:100%; 78 margin-top:50px; 79 } 80 .w350{ 81 width:350px; 82 } 83 84 .w80{ 85 width:80px; 86 text-align: center; 87 } 88 .w80_1{ 89 width:80px; 90 text-align: center; 91 font-weight:bold; 92 } 93 .w80_2{ 94 width:80px; 95 text-align: center; 96 } 97 .w80_3{ 98 width:80px; 99 text-align: center; 100 color:#ff6600; 101 font-size:20px ; 102 } 103 .w100{ 104 width:100px; 105 text-align: center; 106 } 107 .list{ 108 width:100%; 109 height:120px; 110 background: #e2f2ff; 111 } 112 .xian{ 113 width:856px; 114 height:8px; 115 background:#adcbff; 116 margin-top:5px; 117 } 118 .k{ 119 position: relative; 120 } 121 .shop{ 122 width:856px; 123 height:30px; 124 background:white; 125 margin-top:5px; 126 } 127 .shop a{ 128 text-decoration: none; 129 } 130 .lxw{ 131 width:100px; 132 height:25px; 133 background-image: url("../img/images/taobao_relation.jpg"); 134 background-size:100% 100%; 135 position: absolute; 136 left:300px; 137 top:0px; 138 } 139 .choose{ 140 width:50px; 141 } 142 .cp1{ 143 width:100px; 144 height:100px; 145 background-image: url("../img/images/taobao_cart_01.jpg"); 146 background-size:100% 100%; 147 float:left; 148 margin-left:10px; 149 } 150 .cp2{ 151 width:100px; 152 height:100px; 153 background-image: url("../img/images/taobao_cart_02.jpg"); 154 background-size:100% 100%; 155 float:left; 156 margin-left:10px; 157 } 158 .cp3{ 159 width:100px; 160 height:100px; 161 background-image: url("../img/images/taobao_cart_03.jpg"); 162 background-size:100% 100%; 163 float:left; 164 margin-left:10px; 165 } 166 .cp4{ 167 width:100px; 168 height:100px; 169 background-image: url("../img/images/taobao_cart_04.jpg"); 170 background-size:100% 100%; 171 float:left; 172 margin-left:10px; 173 } 174 .cp1_z{ 175 width:200px; 176 height:100px; 177 float:left; 178 margin-left:10px; 179 } 180 .cp1_z a{ 181 text-decoration: none; 182 color:#22579b; 183 } 184 .t1{ 185 font-size:12px; 186 line-height:24px; 187 } 188 .t1:nth-child(3){ 189 float:left; 190 } 191 .logo_1{ 192 width:20px; 193 height:20px; 194 background-image: url("../img/images/taobao_icon_01.jpg"); 195 background-size:100% 100%; 196 float:left; 197 } 198 .j1{ 199 width:12px; 200 height:12px; 201 float:left; 202 margin-left:10px; 203 margin-top:54px; 204 text-align: center; 205 line-height: 10px; 206 margin-top:6px; 207 } 208 .j2{ 209 width:12px; 210 height:12px; 211 float:left; 212 margin-left:3px; 213 text-align: center; 214 line-height: 10px; 215 margin-top:6px; 216 } 217 .doc{ 218 width:50px; 219 height:20px; 220 float:left; 221 margin-left:3px; 222 text-align: center; 223 } 224 .w80 a{ 225 text-decoration: none; 226 } 227 .money{ 228 float:right; 229 } 230 .mon{ 231 font-size:20px; 232 color:#ff650f; 233 font-weight:bold; 234 } 235 .del{ 236 margin-top:40px; 237 float:left; 238 } 239 .right{ 240 float:right; 241 } 242 .cen{ 243 float:right; 244 margin-top:10px; 245 } 246 .ce{ 247 font-size:20px; 248 color:#ff650f; 249 font-weight:bold; 250 } 251 .pay{ 252 width:120px; 253 height:35px; 254 float:right; 255 font-size:20px; 256 background:linear-gradient(to bottom,#f7a34d,#fe6700); 257 color:white; 258 margin-top:10px; 259 }
JS部分
1 //加号按钮点击时 2 var j2=document.getElementsByClassName("j2"); 3 var j1=document.getElementsByClassName("j1"); 4 for(var x of j2){ 5 x.onclick=add; 6 } 7 function add(){ 8 shuliang=this.parentNode.childNodes[3]; 9 shuliang.value++; 10 this.parentNode.parentNode.childNodes[11].innerHTML=this.parentNode.parentNode.childNodes[7].innerHTML*shuliang.value; 11 var jifen=this.parentNode.parentNode.childNodes[5];//积分节点 12 var jifenz=jifen.getAttribute("name");//积分值 13 jifen.innerHTML=parseInt(jifenz)*shuliang.value; 14 total(); 15 } 16 //减号按钮点击时 17 for(var x of j1){ 18 x.onclick=minus; 19 } 20 function minus(){ 21 shuliang=this.parentNode.childNodes[3]; 22 if(shuliang.value>=2){ 23 shuliang.value--; 24 this.parentNode.parentNode.childNodes[11].innerHTML=this.parentNode.parentNode.childNodes[7].innerHTML*shuliang.value; 25 var jifen=this.parentNode.parentNode.childNodes[5];//积分节点 26 var jifenz=jifen.getAttribute("name");//积分值 27 jifen.innerHTML=parseInt(jifenz)*shuliang.value; 28 } 29 total(); 30 } 31 //获取总积分和总价格 32 function total(){ 33 var mon=document.getElementsByClassName("mon");//获取总价节点 34 var ce=document.getElementsByClassName("ce");//获取总积分节点 35 var money=document.getElementsByClassName("w80_3");//获取所有价钱节点 36 var jf=document.getElementsByClassName("w80_1");//获取所有积分值节点 37 var sum=0; 38 for(var i=0;i<money.length;i++){ 39 sum+=parseInt(money[i].innerHTML); 40 } 41 mon[0].innerHTML=sum; 42 var jsum=0; 43 for(var i=0;i<jf.length;i++){ 44 jsum+=parseInt(jf[i].innerHTML); 45 } 46 ce[0].innerHTML=jsum; 47 48 } 49 //删除键点击 50 var dels=document.getElementsByClassName("clear");//获取所有删除键节点 51 for(var x of dels){ 52 x.onclick=clear; 53 } 54 function clear(){ 55 this.parentNode.parentNode.parentNode.parentNode.remove();//删除点击删除节点的物品栏 56 57 58 total(); 59 } 60 61 //全选点击时 62 var all=document.getElementById("all");//获取全选按钮节点 63 var choose=document.getElementsByClassName("choose");//获取所有勾选框节点数组 64 all.onclick=function(){ 65 for(var x of choose){ 66 x.checked=true; 67 } 68 } 69 //删除所选点击 70 var del=document.getElementById("del");//获取删除所选按钮节点 71 del.onclick=del_choose; 72 function del_choose(){ 73 for(var i=choose.length-1;i>=0;i--){ 74 if(choose[i].checked==true){ 75 choose[i].parentNode.parentNode.parentNode.parentNode.parentNode.remove(); 76 all.checked=false; 77 total(); 78 } 79 } 80 }