购物车原理：创建一个构造函数，把涉及到的项目写成方法，然后把这些方法放到构造函数的原型对象上，通过按钮绑定，调用原型对象上的方法，实现对涉及项目的改变
html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>购物车</title> 6 <script src="./js/gouwu.js"></script> 7 <link rel="stylesheet" href="./css/gouwu.css"> 8 </head> 9 <body> 10 <table> 11 <thead> 12 <tr> 13 <th class="tdone">序号</th> 14 <th class="tdtwo">商品名称</th> 15 <th class="tdthree">数量</th> 16 <th class="tdfour">单价</th> 17 <th class="tdfive">小计</th> 18 <th class="tdsix">操作</th> 19 </tr> 20 </thead> 21 <tbody> 22 <tr class="trclass"> 23 <td class="tdone xuhao">1</td> 24 <td class="tdtwo ">烤煎饼</td> 25 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td> 26 <td class="tdfour"><span>单价：</span><span class="unit">2</span></td> 27 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td> 28 <td class="tdsix"><button class="del">删除</button></td> 29 </tr> 30 <tr class="trclass"> 31 <td class="tdone xuhao">2</td> 32 <td class="tdtwo">珍珠奶茶</td> 33 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td> 34 <td class="tdfour"><span>单价：</span><span class="unit">3.5</span></td> 35 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td> 36 <td class="tdsix"><button class="del">删除</button></td> 37 </tr> 38 <tr class="trclass"> 39 <td class="tdone xuhao">3</td> 40 <td class="tdtwo">羊肉串</td> 41 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td> 42 <td class="tdfour"><span>单价：</span><span class="unit">1.5</span></td> 43 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td> 44 <td class="tdsix"><button class="del">删除</button></td> 45 </tr> 46 <tr> 47 <td class="tdone xuhao">4</td> 48 <td class="tdtwo">牛肉</td> 49 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td> 50 <td class="tdfour"><span>单价：</span><span class="unit">10</span></td> 51 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td> 52 <td class="tdsix"><button class="del">删除</button></td> 53 </tr> 54 <tr class="trclass"> 55 <td class="tdone xuhao">5</td> 56 <td class="tdtwo">烧刀子</td> 57 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td> 58 <td class="tdfour"><span>单价：</span><span class="unit">1.8</span></td> 59 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td> 60 <td class="tdsix"><button class="del">删除</button></td> 61 </tr> 62 <tr class="trclass"> 63 <td class="tdone xuhao">6</td> 64 <td class="tdtwo">水煮鱼</td> 65 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td> 66 <td class="tdfour"><span>单价：</span><span class="unit">15</span></td> 67 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td> 68 <td class="tdsix"><button class="del">删除</button></td> 69 </tr> 70 <tr class="trclass"> 71 <td class="tdone xuhao">7</td> 72 <td class="tdtwo">花生米</td> 73 <td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td> 74 <td class="tdfour"><span>单价：</span><span class="unit">3</span></td> 75 <td class="tdfive"><span>小计：</span><span class="subtal">0</span></td> 76 <td class="tdsix"><button class="del">删除</button></td> 77 </tr> 78 <tr><td colspan="6"; class="talast"><span>商品一共 <span class="goods_num">0</span> 件; 共计花费 <span class="pricetal">0</span> 元; 其中最贵的商品单价是 <span class="pricest">0</span> 元</span></td></tr> 79 </tbody> 80 </table> 81 </body> 82 </html>
css代码：
1 table{ 2 width:50%; 3 position:relative; 4 margin:30px auto; 5 border-collapse: collapse; 6 border:1px solid gray; 7 } 8 th{ 9 background: cornflowerblue; 10 height:2.5em; 11 } 12 .tdone{ 13 width:10%; 14 } 15 .tdtwo{ 16 width:20%; 17 } 18 .tdthree{ 19 width:20%; 20 } 21 .tdfour{ 22 width:20%; 23 } 24 .tdfive{ 25 width:20%; 26 } 27 .tdsix{ 28 width:10%; 29 } 30 td{ 31 height:2em; 32 text-align: center; 33 border:1px solid #ccc; 34 } 35 .num{ 36 display:inline-block; 37 width:3em; 38 } 39 input{ 40 height:2em; 41 } 42 .talast{ 43 text-align: left; 44 }
js代码：
1 window.onload = function(){ 2 function cart(){ 3 this.abtn = document.querySelectorAll('input'); 4 this.ogood_num = document.querySelector('.goods_num'); 5 this.opricetal = document.querySelector('.pricetal'); 6 this.opricest = document.querySelector('.pricest'); 7 this.totalnum = 0; 8 }; 9 //小计: 商品数量 * 商品单价 10 cart.prototype.getsubtotal = function(goodsnum,unitprice){ 11 return parseInt(goodsnum) * parseFloat(unitprice) ; 12 }; 13 // 计算商品的总计花费 14 cart.prototype.gettotal = function(){ 15 var asubtotal = document.querySelectorAll('.subtal'); 16 var res = 0; 17 for(var i=0,len=asubtotal.length;i<len;i++){ 18 res += parseFloat(asubtotal[i].innerHTML); 19 }; 20 return res; 21 }; 22 // 寻找购物车中已经选中的产品的最大单价 23 cart.prototype.compareMaxunit = function(){ 24 var anum = document.querySelectorAll('.num'); 25 var aunit = document.querySelectorAll('.unit'); 26 var temp = 0; 27 for(var i=0,len=anum.length;i<len;i++){ 28 if(anum[i].innerHTML!=0){ 29 if(temp<parseFloat(aunit[i].innerHTML)){ 30 temp = parseFloat(aunit[i].innerHTML); 31 } 32 } 33 }; 34 return temp; 35 }; 36 // 点击“+”号按钮触发的购物车商品数量，花费，最大价格的变动 37 cart.prototype.plus = function(obtn){ 38 var onum = obtn.parentNode.querySelector('.num'); 39 var n = parseInt(onum.innerHTML); 40 onum.innerHTML = ++n ; 41 this.totalnum++; 42 var oUnit = obtn.parentNode.parentNode.parentNode.querySelector('.unit'); 43 var osubtotal = obtn.parentNode.parentNode.parentNode.querySelector('.subtal'); 44 osubtotal.innerHTML = this.getsubtotal(onum.innerHTML,oUnit.innerHTML); 45 this.ogood_num.innerHTML = this.totalnum; 46 this.opricetal.innerHTML = this.gettotal(); 47 this.opricest.innerHTML = this.compareMaxunit(); 48 }; 49 // 点击“-”号按钮触发的购物车商品数量，花费，最大价格的变动 50 cart.prototype.minus = function(obtn){ 51 var onum = obtn.parentNode.querySelector('.num'); 52 if(parseInt(onum.innerHTML)>0){ 53 var n = parseInt(onum.innerHTML); 54 onum.innerHTML = --n ; 55 this.totalnum--; 56 var oUnit = obtn.parentNode.parentNode.parentNode.querySelector('.unit'); 57 var osubtotal = obtn.parentNode.parentNode.parentNode.querySelector('.subtal'); 58 osubtotal.innerHTML = this.getsubtotal(onum.innerHTML,oUnit.innerHTML); 59 this.ogood_num.innerHTML = this.totalnum; 60 this.opricetal.innerHTML = this.gettotal(); 61 this.opricest.innerHTML = this.compareMaxunit(); 62 } 63 }; 64 // 获取已买商品的总计数量 65 cart.prototype.getNumbertal = function(){ 66 var anum = document.querySelectorAll('.num'); 67 var res_num = 0; 68 for(var i =0;i<anum.length;i++){ 69 res_num += parseInt( anum[i].innerHTML ) ; 70 } 71 return res_num ; 72 } 73 // 删除按钮触发的购物车商品数量，花费，最大价格的变动 74 cart.prototype.del = function(obtn){ 75 var odel = obtn.parentNode.parentNode; 76 var oparent = odel.parentNode; 77 oparent.removeChild(odel); 78 this.ogood_num.innerHTML = this.getNumbertal(); 79 this.opricetal.innerHTML = this.gettotal(); 80 this.opricest.innerHTML = this.compareMaxunit(); 81 this.xuhaosort(); 82 } 83 // 购物车序号重新排序 84 cart.prototype.xuhaosort = function(){ 85 var axuhao = document.querySelectorAll('.xuhao'); 86 for(var i=0,len=axuhao.length;i<len;i++){ 87 axuhao[i].innerHTML = i+1; 88 } 89 } 90 // 绑定“+”，“-”，删除按钮的点击事件 91 cart.prototype.bind = function(){ 92 var that = this ; 93 for(var i=0;i<this.abtn.length;i++){ 94 if(i%2 !=0){ 95 this.abtn[i].onclick = function(){ 96 that.plus(this); 97 } 98 }else{ 99 this.abtn[i].onclick = function(){ 100 that.minus(this); 101 } 102 } 103 }; 104 var delbtn = document.querySelectorAll('.del'); 105 for(var i=0;i<delbtn.length;i++){ 106 delbtn[i].onclick = function(){ 107 that.del(this); 108 } 109 } 110 }; 111 var oCart = new cart(); 112 oCart.bind(); 113 }
运行结果：
点击“-”号按钮结果：
点击“+”号按钮结果：
点击“删除”按钮结果：
