让我们一起看一下淘宝的购物车是怎么做的吧，刚刚入门的我可能很多地方的用法都不够优化，不过个人感觉先把逻辑清晰之后再做的话其实也并不难哦，
以下是我做的页面代码：
HTML代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link rel="stylesheet" href="css/index.css" /> 7 </head> 8 <body> 9 <div class="container"> 10 <!--logo--> 11 <img src="img/taobao_logo.gif" class="logo"/> 12 <!--nav--> 13 <div class="nav"> 14 <span>您的位置：</span> 15 <a href="#" class="a">首页</a> > 16 <a href="#" class="a">我的淘宝</a> > 17 <a href="#">我的购物车</a> 18 </div> 19 <!--查看购物车--> 20 <ul class="lookcar"> 21 <li><p class="li_p">1、查看购物车</p><span class="san"></span><img src="img/ji.png" class="jianto"/></li> 22 <li>2、确认订单信息<img src="img/ji.png" class="jianto"/></li> 23 <li>3、付款到支付宝<img src="img/ji.png" class="jianto"/></li> 24 <li>4、确认收回<img src="img/ji.png" class="jianto"/></li> 25 <li>5、评价</li> 26 </ul> 27 <table id="shopping"> 28 <tr class="tr_top"> 29 <td class="td1"> 30 <input id="checkAll" type="checkbox" value="" onclick="checkAll()"/>全选 31 </td> 32 <td class="td2">店铺宝贝</td> 33 <td class="td3">获积分</td> 34 <td class="td4">单价（元）</td> 35 <td class="td5">数量</td> 36 <td class="td6">小计（元）</td> 37 <td class="td7">操作</td> 38 </tr> 39 40 <!--商品1--> 41 42 <tr class="tr2"> 43 <td colspan="7"> 44 店铺：<span class="blue">纤巧百媚时尚鞋坊</span> 卖家：<span class="blue">纤巧百媚</span> 45 <img src="img/taobao_relation.jpg"/> 46 </td> 47 </tr> 48 <tr id="product1"> 49 <td class="td1"> 50 <input name="check" type="checkbox" /> 51 </td> 52 <td class="td2"> 53 <img src="img/taobao_cart_01.jpg" class="img1"/> 54 <ul class="text"> 55 <li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li> 56 <li>颜色：棕色 尺码：37</li> 57 <li>保障： <img src="img/taobao_icon_01.jpg"/></li> 58 </ul> 59 </td> 60 <td class="td3" id="jf1">5</td> 61 <td class="td4" id="mon">138.00</td> 62 <td class="td5"> 63 <img src="img/taobao_minus.jpg" onclick="onclickNum('num1','minus')"/> 64 <input type="text" id="num1" class="num_input" value="1"/> 65 <img src="img/taobao_adding.jpg" onclick="onclickNum('num1','add')"/> 66 </td> 67 <td class="td6" id="jg"></td> 68 <td class="td7"><a href="#" class="del">删除</a></td> 69 </tr> 70 <!--商品2--> 71 <tr class="tr2"> 72 <td colspan="7"> 73 店铺：<span class="blue">纤巧百媚时尚鞋坊</span> 卖家：<span class="blue">纤巧百媚</span> 74 <img src="img/taobao_relation.jpg"/> 75 </td> 76 </tr> 77 <tr id="product2"> 78 <td class="td1"> 79 <input name="check" type="checkbox" /> 80 </td> 81 <td class="td2"> 82 <img src="img/taobao_cart_02.jpg" class="img1"/> 83 <ul class="text"> 84 <li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li> 85 <li>颜色：棕色 尺码：37</li> 86 <li>保障： <img src="img/taobao_icon_01.jpg"/><img src="img/taobao_icon_02.jpg"/></li> 87 </ul> 88 </td> 89 <td class="td3" id="jf2">12</td> 90 <td class="td4">265.00</td> 91 <td class="td5"> 92 <img src="img/taobao_minus.jpg" onclick="onclickNum('num2','minus')" /> 93 <input type="text" id="num2" class="num_input" value="1"/> 94 <img src="img/taobao_adding.jpg" onclick="onclickNum('num2','add')"/> 95 </td> 96 <td class="td6" id="jg2"></td> 97 <td class="td7"><a href="#" class="del">删除</a></td> 98 </tr> 99 100 <!--商品3--> 101 <tr class="tr2"> 102 <td colspan="7"> 103 店铺：<span class="blue">纤巧百媚时尚鞋坊</span> 卖家：<span class="blue">纤巧百媚</span> 104 <img src="img/taobao_relation.jpg"/> 105 </td> 106 </tr> 107 <tr id="product3"> 108 <td class="td1"> 109 <input name="check" type="checkbox" /> 110 </td> 111 <td class="td2"> 112 <img src="img/taobao_cart_03.jpg" class="img1"/> 113 <ul class="text"> 114 <li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li> 115 <li>颜色：棕色 尺码：37</li> 116 <li>保障： <img src="img/taobao_icon_01.jpg"/></li> 117 </ul> 118 </td> 119 <td class="td3" id="jf3">3</td> 120 <td class="td4">58.00</td> 121 <td class="td5"> 122 <img src="img/taobao_minus.jpg" onclick="onclickNum('num3','minus')" /> 123 <input type="text" id="num3" class="num_input" value="1"/> 124 <img src="img/taobao_adding.jpg" onclick="onclickNum('num3','add')" /> 125 </td> 126 <td class="td6" id="jg3"></td> 127 <td class="td7"><a href="#" class="del">删除</a></td> 128 </tr> 129 130 <!--商品4--> 131 <tr class="tr2"> 132 <td colspan="7"> 133 店铺：<span class="blue">纤巧百媚时尚鞋坊</span> 卖家：<span class="blue">纤巧百媚</span> 134 <img src="img/taobao_relation.jpg"/> 135 </td> 136 </tr> 137 138 <tr id="product4"> 139 <td class="td1"> 140 <input name="check" type="checkbox"/> 141 </td> 142 <td class="td2"> 143 <img src="img/taobao_cart_04.jpg" class="img1"/> 144 <ul class="text"> 145 <li>日韩流行风时尚美美独爱拼图金属坡跟<br />公主靴子黑色</li> 146 <li>颜色：棕色 尺码：37</li> 147 <li>保障： <img src="img/taobao_icon_01.jpg"/></li> 148 </ul> 149 </td> 150 <td class="td3" id="jf4">12</td> 151 <td class="td4">12.00</td> 152 <td class="td5"> 153 <img src="img/taobao_minus.jpg" onclick="onclickNum('num4','minus')" /> 154 <input type="text" id="num4" class="num_input" value="1"/> 155 <img src="img/taobao_adding.jpg" onclick="onclickNum('num4','add')" /> 156 </td> 157 <td class="td6" id="jg4"></td> 158 <td class="td7"><a href="#" class="del">删除</a></td> 159 </tr> 160 161 </table> 162 <a href="javascript:delAll()"> 163 <img src="img/taobao_del.jpg" alt="delete" id="del"/> 164 </a> 165 166 <ul class="foot_rig"> 167 <li>商品总价（不含运费）：<span id="total">0</span>元</p> 168 <li><p class="li_2">可获得积分<span class="jfsum" id="integral">0</span>点</p></li> 169 <li class="li_a"><img src="img/taobao_subtn.jpg" class="buy"/></li> 170 </ul> 171 </div> 172 <script src="js/index.js"></script> 173 </body> 174 </html>
CSS代码:
1 *{margin: 0;padding: 0;} 2 .container{width: 1000px;margin: 0 auto;} 3 a{text-decoration:none;color: #000;} 4 li{list-style: none;} 5 .logo{padding-top: 10px;} 6 .nav{height: 60px;width: 100%;line-height: 60px;font-size: 14px;} 7 .a{color: #3a68a3;} 8 /*查看购物车*/ 9 .lookcar{width: 100%;} 10 .lookcar li{box-sizing:border-box;width: 20%;height: 30px;float: left;line-height: 30px;text-align: center;background: #e4e4e4;position: relative;} 11 .li_p{float: left;width: 92%;height: 100%;background: #ff6600;} 12 .san{width: 0;height: 0;float:left;border-top: 15px solid transparent;border-left:15px solid #ff6600 ;border-bottom: 15px solid transparent;} 13 .jianto{position: absolute;height: 100%;right: 0;} 14 table{width: 100%;border-collapse:collapse;} 15 table .tr_top{height: 50px;border-bottom: 4px solid #bac9dc;} 16 table .tr2{height: 50px;} 17 table #product1,#product2,#product3,#product4{height: 120px;background: #e2f2ff;} 18 table .tr3 td{border-right: 1px solid #fff;} 19 .blue{color: #3A68A3;} 20 .td1{width: 70px;text-align: center;} 21 .td2{width: 400px;} 22 .td3,.td4{width: 100px;text-align: center;} 23 .td6{width: 100px;text-align: center;color: #FF6600;font-weight: bold;} 24 .td5{width: 130px;text-align: center;} 25 .td7{text-align: center;color: #3A68A3;} 26 .img1{float: left;width: 100px;height: 100px;margin-left: 4px;} 27 .text{float: left;padding-left: 10px;font-size:14px ;line-height: 24px;} 28 .text li:first-child{color: #3A68A3;} 29 .num_input{width: 30px;} 30 .foot{width: 100%;height: 150px;} 31 .foot_left{float: left;} 32 #del{width: 130px;height: 30px;margin-top: 60px;} 33 .foot_rig{width:300px;float: right;} 34 .foot_rig li{padding: 10px 0;float: right;} 35 .li_2{margin-left: 150px;} 36 .sum,.jfsum{font-size:18px;font-weight: bold; color: #FF6600;} 37 .delete{color: #3A68A3;}
JS代码:
1 //全选 2 function checkAll(){ 3 var inp=document.getElementsByName("check"); 4 var ind=document.getElementById("checkAll"); 5 for(var i of inp){ 6 i.checked=ind.checked; 7 cpCount(); 8 } 9 } 10 //删除一行 11 var dels = document.getElementsByClassName("del"); 12 for (var x of dels) { 13 x.onclick = deleteTr; 14 } 15 function deleteTr(){ 16 this.parentNode.parentNode.previousSibling.previousSibling.remove() 17 this.parentNode.parentNode.remove(); 18 cpCount(); 19 } 20 /*删除选中行的商品*/ 21 var delss=document.getElementById('del'); //获取删除所选的按钮 22 delss.onclick = function delec(){ 23 var inp=document.getElementsByName("check"); //获取每个多选框 24 for (var i=inp.length-1;i>=0;i--){ 25 if(inp[i].checked == true){ 26 inp[i].parentNode.parentNode.previousSibling.previousSibling.remove(); 27 inp[i].parentNode.parentNode.remove(); 28 inp.checked = false; 29 cpCount(); 30 } 31 } 32 } 33 //商品数量 34 function onclickNum(numId,count){ 35 var numId=document.getElementById(numId); 36 if(count=="minus"){ 37 if(numId.value<=1){ 38 alert("不能是0"); 39 return false; 40 }else{ 41 numId.value=parseInt(numId.value)-1; 42 cpCount(); 43 } 44 }else{ 45 numId.value=parseInt(numId.value)+1; 46 cpCount(); 47 } 48 } 49 //计算商品的总价和积分总 50 function cpCount(){ 51 var total=0; //所有商品的总计 52 var integral=0; //所有商品的积分 53 var point; //每一行商品的单品积分 54 var price; //每一行商品的单价 55 var nums; //每一行商品的数量 56 var subtotal; //每一行商品的小计 57 //找出表格中所有的行数 58 var tableTr=document.getElementById("shopping").getElementsByTagName("tr"); 59 if(tableTr.length>0){ 60 for(var i=1;i<tableTr.length;i++){ 61 if(tableTr[i].getElementsByTagName("td").length>2){ //找到所有行数内的td数量大于2的行数 62 point=tableTr[i].getElementsByTagName("td")[2].innerHTML; //每一行商品的单品积分 63 price=tableTr[i].getElementsByTagName("td")[3].innerHTML; //每一行商品的单价 64 nums=tableTr[i].getElementsByTagName("td")[4].getElementsByTagName("input")[0].value; //每一行商品的数量 65 integral+=point*nums; //所有商品的积分的和 = 每一行商品的单价积分 x 数量 相加 66 total+=price*nums; //所有商品的总计的和 = 每一个商品的单价 x 数量 相加 67 tableTr[i].getElementsByTagName("td")[5].innerHTML=price*nums; //每行商品小计 =商品的单价 x 数量 68 69 } 70 71 } 72 document.getElementById("total").innerHTML=total; 73 document.getElementById("integral").innerHTML=integral; 74 } 75 } 76 window.onload=cpCount; 77
代码中如果有存在的问题希望可以帮我指出哦，当然如果有什么不会的不理解的也可以在下面问我哦~~~~~~祝大家周末愉快