JavaScript实现购物车主要功能：
（1）点击全选按钮，所有商品都会被选中或取消选中，且⼩计、商品总数和总价同步变化。
（2）点击加号按钮或减号按钮，可以增加或减少商品的数量，且⼩计、商品总数和总价同步变化。
（3）点击删除按钮，可以删除商品，且总商品数和总价同步变化。
（4）增加或减少商品的数量时，该商品会⾃动被选中。
完整代码：
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <title>Document</title>
9 <style>
10 * {
11 margin: 0;
12 padding: 0;
13 }
14
15 .column {
16 float: left;
17 }
18
19 .cart-head {
20 width: 988px;
21 height: 32px;
22 line-height: 32px;
23 background: #f3f3f3;
24 padding: 5px 0;
25 border: 1px solid #e9e9e9;
26 border-top: 0;
27 font-size: 12px;
28 margin-bottom: 1px;
29 }
30
31 .checkbox {
32 width: 122px;
33 height: 18px;
34 line-height: 18px;
35 padding-left: 11px;
36 padding-top: 7px;
37 }
38
39 .checkAll {
40 margin-right: 5px;
41 vertical-align: text-bottom;
42 }
43
44 .goods {
45 width: 208px;
46 }
47
48 .props {
49 width: 140px;
50 height: 32px;
51 padding: 0 10px 0 20px;
51 padding: 0 10px 0 20px;
52 }
53
54 .price {
55 width: 120px;
56 padding-right: 50px;
57 text-align: right;
58 }
59
60 .quantity {
61 width: 80px;
62 text-align: center;
63 }
64
65 .sum {
66 width: 100px;
67 padding-right: 40px;
68 text-align: right;
69 }
70
71 .action {
72 width: 75px;
73 }
74
75 .cart-foot {
76 position: relative;
77 width: 988px;
78 height: 50px;
79 border: 1px solid #f0f0f0;
80 font-size: 12px;
81 }
82
83 .cart-foot .left {
84 float: left;
85 width: 363px;
86 height: 50px;
87 }
88
89 .select-all {
90 float: left;
91 width: 49px;
92 height: 50px;
93 line-height: 50px;
94 padding-left: 9px;
95 }
96
97 .select-all .checkAll {
98 margin: 5px 3px 0 0;
99 vertical-align: text-bottom; 100 }
101
102 .operation {
103 float: left;
104 width: 305px;
105 height: 50px;
106 line-height: 50px;
107 }
108
109 .operation a {
110 float: left;
111 margin-left: 10px;
112 color: #666;
113 text-decoration: none; 114 }
115
116 .cart-foot .right {
116 .cart-foot .right {
117 /* position: absolute;
118 top: 0;
119 right: 0; */
120 float: left;
121 width: 625px;
122 height: 50px;
123 }
124
125 .price-sum {
126 float: right;
127 width: 220px;
128 height: 50px;
129 line-height: 50px;
130 color: #999;
131 }
132
133 .totalAmount {
134 padding: 0 3px;
135 }
136
137 .total {
138 color: #e22312;
139 font-size: 16px;
140 font-weight: 700;
141 }
142
143 .btn-area {
144 float: right;
145 width: 95px;
146 height: 50px;
147 line-height: 50px;
148 text-align: center;
149 background-color: #e22312; 150 font-size: 18px;
151 font-weight: 700;
152 }
153
154 .btn-area a {
155 color: #fff;
156 text-decoration: none;
157 }
158
159 .item {
160 width: 988px;
161 height: 119px;
162 line-height: 119px;
163 border-top: 1px solid #f0f0f0; 164 font-size: 12px;
165 }
166
167 .checkUnit {
168 width: 115px;
169 height: 119px;
170 padding-left: 13px;
171 }
172
173 .white {
174 width: 95px;
175 height: 119px;
176 }
177
178 .shop {
179 width: 380px;
180 height: 119px;
181 }
181 }
182
183 .shop img {
184 margin-top: 15px;
185 border: 1px solid rgba(204, 204, 204, 0.548); 186 float: left;
187 }
188
189 .shop .desc {
190 float: left;
191 width: 190px;
192 height: 119px;
193 line-height: 30px;
194 padding-top: 15px;
195 padding-left: 20px;
196 }
197
198 .count button {
199 width: 23px;
200 height: 20px;
201 border: 1px solid #cbcbcb;
202 background-color: #fff;
203 }
204
205 .count input {
206 width: 30px;
207 height: 20px;
208 outline: none;
209 text-align: center;
210 border: 1px solid #cbcbcb;
211 box-sizing: border-box;
212 }
213
214 .unitPrice {
215 width: 90px;
216 height: 119px;
217 }
218
219 .count {
220 width: 140px;
221 height: 119px;
222 }
223
224 .subtotal {
225 width: 72px;
226 height: 119px;
227 }
228
229 .handle {
230 width: 83px;
231 height: 119px;
232 }
233
234 .handle a {
235 display: block;
236 line-height: 55px;
237 color: #808080;
238 text-decoration: none;
239 }
240
241 .bg {
242 background-color: rgba(233, 158, 19, 0.226); 243 }
244 </style>
245</head>
246
246
247<body>
248 <div class="cart-head">
249 <div class="column checkbox">
250 <input type="checkbox" class="checkAll">
251全选
252 </div>
253 <div class="column goods">商品</div>
254 <div class="column props"></div>
255 <div class="column price">单价</div>
256 <div class="column quantity">数量</div>
257 <div class="column sum">⼩计</div>
258 <div class="column action">操作</div>
259 </div>
260 <div class="cart-body"></div>
261 <div class="cart-foot">
262 <div class="left">
263 <div class="select-all">
264 <input type="checkbox" class="checkAll">
265全选
266 </div>
267 <div class="operation">
268 <a href="javascript:;">删除选中的商品</a>
269 <a href="javascript:;">移⼊关注</a>
270 <a href="javascript:;">
271 <strong>清理购物车</strong>
272 </a>
273 </div>
274 </div>
275 <div class="right">
276 <div class="btn-area">
277 <a href="javascript:;">去结算</a>
278 </div>
279 <div class="price-sum">网页购物车代码
280 <span>已选择</span><em class="totalAmount">0</em><span>件商品</span>
281 <span>总价：￥</span><em class="total"></em>
282 </div>
283 </div>
284 </div>
285 <script>
286 var data = [
287 {
288 "name": "你不知道的JavaScript 上卷+中卷+下卷（套装共3册京东）(图灵出品)",
289 "src": "./img/book1.jpg",
290 "price": "181.30"
291 },
292 {
293 "name": "JavaScript⾼级程序设计第4版(图灵出品）",
294 "src": "./img/book2.jpg",
295 "price": "106.70"
296 },
297 {
298 "name": "JavaScript 指南原书第7版犀⽜书JS⾼级程序设计",
299 "src": "./img/book3.jpg",
300 "price": "119.90"
301 }
302 ];
303 var cartBody = document.querySelector(".cart-body");
304 var totalQuantity = 0; //商品总数
305 renderData();
306 //渲染数据
307 function renderData() {
308 var str = "";
309 for (var i = 0; i < data.length; i++) {
310 str += "<div class='item'><div class='checkUnit column'><input type='checkbox' class='checkItem'/></div>" + 311 "<div class='shop column'><img src='" + data[i].src + "'/><div class='desc'>" + data[i].name + "</div></div>" +
发表评论