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>" +

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。