js 购物车的实现

购物车原理：创建一个构造函数，把涉及到的项目写成方法，然后把这些方法放到构造函数的原型对象上，通过按钮绑定，调用原型对象上的方法，实现对涉及项目的改变

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>

View Code

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     }

View Code

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 }

运行结果：

点击“-”号按钮结果：

点击“+”号按钮结果：

点击“删除”按钮结果：

posted on 2017-12-13 11:20 huanying2015 阅读(14077) 评论(0) 编辑收藏举报