购物车案例

car.html代码：

 1 <body>
 2   <div class="car">
 3     <table>
 4       <thead>
 5         <tr>
 6           <th>
 7             <input type="checkbox" id="all">全选
 8           </th>
 9           <th>
10             商品
11           </th>
12           <th>
13             单价
14           </th>
15           <th>
16             商品数量
17           </th>
18           <th>
19             小计
20           </th>
21           <th>
22             操作
23           </th>
24         </tr>
25       </thead>
26       <tbody>
27 
28       </tbody>
29     </table>
30     <div class="controls clearfix">
31       <a href="javascript:" class="del-all">删除所选商品</a>
32       <a href="javascript:" class="clear">清理购物车</a>
33       <a href="javascript:" class="pay">去结算</a>
34       <p>
35         已经选中
36         <span id="totalCount">0</span>件商品;总价：
37         <span id="totalPrice" class="total-price">0￥</span>
38       </p>
39     </div>
40   </div>
41   <!-- 提示购物车为空 -->
42   <div class="info">购物车为空</div>
43 </body>

清除样式base.css代码：

 1 * {
 2   margin: 0;
 3   padding: 0;
 4 }
 5 ul {
 6   list-style: none;
 7 }
 8 a {
 9   text-decoration: none;
10   color:#666;
11 }
12 body {
13   background: #fff;
14   color:#666;
15   font-size: 14px;
16 }
17 input {
18   outline: none;
19 }
20 .clearfix::before,.clearfix::after {
21   content: '';
22   display: block;
23   clear: both;
24 }
25 .clearfix {
26   *zoom: 1;
27 }

页面样式index.css代码：

  1 table {
  2   width: 800px;
  3   margin: 0 auto;
  4   border-collapse: collapse;
  5   margin-bottom: 50px;
  6 }
  7 th {
  8   font:normal 14px/50px '宋体';
  9   color:#666;
 10 }
 11 th,td {
 12   border:none;
 13   text-align: center;
 14   border-bottom: 1px dashed #ccc;
 15 }
 16 input[type=checkbox] {
 17   width: 13px;
 18   height: 13px;
 19 }
 20 tbody p {
 21   position: relative;
 22   bottom: 5px;
 23 }
 24 tbody .add,tbody .reduce {
 25   float: left;
 26   width: 20px;
 27   height: 20px;
 28   border:1px solid #ccc;
 29   text-align: center;
 30 
 31 }
 32 tbody input[type=text] {
 33   width: 50px;
 34   float: left;
 35   height: 18px;
 36   text-align: center;
 37 }
 38 tbody .count-c {
 39   width: 98px;
 40   margin:0 auto;
 41 }
 42 tbody td img {
 43   margin-top: 10px;
 44 }
 45 tbody td p {
 46   margin:10px 0;
 47 }
 48 .disabled {
 49   color:#ddd;
 50   cursor:not-allowed;
 51 }
 52 tbody tr:hover {
 53   background: rgba(241, 209, 149, 0.945);
 54 }
 55 tbody tr.active{
 56   background: rgba(241, 209, 149, 0.945);
 57 }
 58 tbody td:nth-child(4) {
 59   position: relative;
 60 }
 61 tbody td:nth-child(4) div {
 62   width: 98px;
 63   position: absolute;
 64   left:50%;
 65   transform: translateX(-50%);
 66 }
 67 .controls  {
 68   width: 790px;
 69   margin:10px auto;
 70   border:1px solid #ccc;
 71   line-height: 50px;
 72   padding-left: 10px;
 73   position: fixed;
 74   bottom: 0px;
 75   background: #fff;
 76   left:50%;
 77   transform: translateX(-50%);
 78 }
 79 .controls .del-all,.controls .clear {
 80   float: left;
 81   margin-right: 50px;
 82 }
 83 .controls p {
 84   float: right;
 85   margin-right: 100px;
 86 } 
 87 .controls span {
 88   color:red;
 89 }
 90 .controls .pay {
 91   position: absolute;
 92   right: 0;
 93   width: 80px;
 94   height: 54px;
 95   background: red;
 96   font:bold 20px/54px '宋体';
 97   color:#fff;
 98   text-align: center;
 99   bottom: -1px;
100 }
101 .controls .total-price {
102   font-weight: bold;
103 }
104 .info{
105   width: 800px;
106   height: 400px;
107   background: #666;
108   color:#ccc;
109   font:bold 100px/400px '宋体';
110   text-align: center;
111   margin:0 auto;
112   display: none;
113 }

car.js代码：

  1 // 准备:动态生成表格
  2 // 功能1:点击thead中的复选框，实现全选（控制thead中所有的复选框）
  3 // 功能2:点击tbody中的复选框，控制thead中全选是否选中
  4 // 功能3:封装实现计算总数量和总价格
  5 // 功能4:点击加按钮实现商品数量增加
  6 // 功能5:点击减按钮实现商品数量递减
  7 // 功能6:点击删除按钮删除单种商品
  8 // 功能7:删除所选商品
  9 // 功能8:清理购物车
 10 var datas = [{
 11         pName: '牛奶',
 12         src: 'uploads/01.jpg',
 13         price: 10,
 14         count: 1
 15     },
 16     {
 17         pName: '三只松鼠',
 18         src: 'uploads/02.jpg',
 19         price: 30,
 20         count: 4
 21     },
 22     {
 23         pName: '蓝牙播放器',
 24         src: 'uploads/03.jpg',
 25         price: 100,
 26         count: 1
 27     },
 28     {
 29         pName: '大米',
 30         src: 'uploads/04.jpg',
 31         price: 50,
 32         count: 10
 33     },
 34     {
 35         pName: '路由器',
 36         src: 'uploads/05.jpg',
 37         price: 110,
 38         count: 1
 39     },
 40     {
 41         pName: '罐头',
 42         src: 'uploads/06.jpg',
 43         price: 20,
 44         count: 5
 45     }
 46 ]
 47 
 48 for (var i = 0; i < datas.length; i++) {
 49     var obj = datas[i];
 50     var htmlTr = `
 51       <tr>
 52         <td>
 53           <input type="checkbox" >
 54         </td>
 55         <td>
 56           <img src="${obj.src}">
 57           <p>${obj.pName}</p>
 58         </td>
 59         <td>
 60           ${obj.price}￥
 61         </td>
 62         <td>
 63           <div class="count-c clearfix">
 64             <a href="javascript:" class="reduce ${obj.count == 1 ? 'disabled' : ''}">-</a>
 65             <input type="text" readonly value="${obj.count}">
 66             <a href="javascript:" class="add">+</a>
 67           </div>
 68         </td>
 69         <td>
 70           ${obj.price * obj.count}￥
 71         </td>
 72         <td>
 73           <a href="javascript:" class="del">删除</a>
 74         </td>
 75       </tr>
 76   `;
 77     $('tbody').append(htmlTr);
 78 }
 79 
 80 $('thead input').click(function () {
 81     $('tbody input[type=checkbox]').prop('checked', this.checked);
 82     countAndPrice();
 83 });
 84 
 85 $('tbody input[type=checkbox]').click(function () {
 86     var len1 = $('tbody input[type=checkbox]').length;
 87     var len2 = $('tbody input[type=checkbox]:checked').length;
 88     $('thead input').prop('checked', len1 == len2);
 89     countAndPrice();
 90 });
 91 
 92 function countAndPrice() {
 93     var tr = $('tbody input[type=checkbox]:checked').parent().parent();
 94     var sumCount = 0;
 95     var sumPrice = 0;
 96     for (var i = 0; i < tr.length; i++) {
 97         var sCount = tr.eq(i).find('input[type=text]').val();
 98         sumCount += parseInt(sCount);
 99         var sPrice = tr.eq(i).find('td').eq(4).text();
100         sumPrice += parseFloat(sPrice);
101     }
102     $('#totalCount').text(sumCount);
103     $('#totalPrice').text(sumPrice + '¥');
104 }
105 
106 $('.add').click(function () {
107     $(this).prev().prev().removeClass('disabled');
108     var count = $(this).prev().val();
109     count++;
110     if (count > 12) {
111         $(this).addClass('disabled');
112         alert('人家不能再多了啦～');
113         count = 12;
114     }
115     $(this).prev().val(count);
116     $(this).parent().parent().parent().find('input[type=checkbox]').prop('checked', true);
117     $('thead input').prop('checked', $('tbody input[type=checkbox]').length == $('tbody input[type=checkbox]:checked').length);
118     var siglePrice = parseInt($(this).parent().parent().prev().text());
119     $(this).parent().parent().next().text(count * siglePrice + '¥');
120     countAndPrice();
121 });
122 
123 $('.reduce').click(function () {
124     $(this).next().next().removeClass('disabled');
125     var count = $(this).next().val();
126     count--;
127     if (count < 1) {
128         $(this).addClass('disabled');
129         alert('人家不能再减了啦～');
130         count = 1;
131     }
132     $(this).next().val(count);
133     $(this).parent().parent().parent().find('input[type=checkbox]').prop('checked', true);
134     $('thead input').prop('checked', $('tbody input[type=checkbox]').length == $('tbody input[type=checkbox]:checked').length);
135     var siglePrice = parseInt($(this).parent().parent().prev().text());
136     $(this).parent().parent().next().text(count * siglePrice + '¥');
137     countAndPrice();
138 });
139 
140 function showAndHide() {
141     if ($('tbody tr').length == 0) {
142         $('.info').show();
143         $('thead input').prop('checked', false);
144     }
145 }
146 
147 $('.del').click(function () {
148     var isOk = confirm('真的不要人家了嘛 T_T～');
149     if (isOk) {
150         $(this).parent().parent().remove();
151         countAndPrice();
152     }
153     showAndHide();
154 });
155 
156 $('.del-all').click(function () {
157     var isOk = confirm('真的不要选中的这些了嘛 ToT～');
158     if (isOk) {
159         $('tbody input[type=checkbox]:checked').parent().parent().remove();
160         countAndPrice();
161     }
162     showAndHide();
163 });
164 
165 $('.clear').click(function () {
166     var isOk = confirm('真的全都不要了嘛 TAT～');
167     if (isOk) {
168         $('tbody tr').remove();
169         countAndPrice();
170     }
171     showAndHide();
172 });