本文实例为大家分享了js实现购物车功能的具体代码，供大家参考，具体内容如下
使用html配合原生js实现购物车功能
* 实现购物车商品数量的加减，注意数量最少为1，数量输入仅能为数字
* 实现购物车商品的移除
* 可以在同一页面再设计几个商品信息，每个商品有价格，图片，名称，以及添加至购物车按钮，点击按钮后添加至购物车
* 实现购物车商品的总价计算
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
|
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>商品</title> <style> html,body{ margin: 0;} .row{ width:100%; height:300px; } .col{ width:200px; height:216px; margin: 0px 1px 0px 1px; padding-top: 2px; border:solid black 1px; float:left; text-align:center; } .col img { width: 150px;} </style> <script src="js/jquery-3.2.1.min.js"></script> <script> function calculate() { var tbody = document.getElementById("tb"); var prices = tbody.querySelectorAll("td:nth-child(4)"); var numbers = tbody.querySelectorAll("td:nth-child(5)>input[type=number]"); var checkboxes = tbody.querySelectorAll("th:nth-child(1)>input"); //console.log(prices); //console.log(numbers); //console.log(checkboxes); var total=0; for(var i = 0; i < prices.length; i++) { console.log("价格：" +parseInt(prices[i].innerText)+" 数量："+parseInt(numbers[i].value) + "是否勾选:" + checkboxes[i].checked); if(checkboxes[i].checked){ total += parseInt(prices[i].innerText)*parseInt(numbers[i].value); } } console.log("总价格：" + total); document.getElementById("total").innerText = total; } // 移除商品 function del(me) { var tr = me.parentNode.parentNode; var tbody = tr.parentNode; tbody.removeChild(tr); calculate(); } // 增加商品数量 function jia(me) { var td = me.parentNode; var inputs = td.getElementsByTagName("input"); // 找到此td下所有input标签 // inputs[1].value = inputs[1].value - 0 + 1; // 用-0的办法转为数字 // parseInt 将字符串转整数 parseFloat 将字符串转小数 inputs[1].value = parseInt(inputs[1].value) + 1; calculate(); } // 减少商品数量 function jian(me) { var td = me.parentNode; var num = td.querySelector("input[type=number]");// 只查找有type=number属性的input标签 var r = num.value - 1; if( r >= 1) { // 只有减得的结果是大于等于1的情况下才需要改变文本框的值 num.value = r; calculate(); } } // 改变复选框的选中状态 function check(me) { var tbody = document.getElementById("tb"); var inputs = tbody.querySelectorAll("th input"); for(var i = 0; i <inputs.length; i++) { inputs[i].checked = me.checked; // 根据me的checked状态去修改下面的每个checked状态 } calculate(); } // 添加商品至购物车 function add(me) { var tbody = document.getElementById("tb"); var div = me.parentNode; var spans = div.getElementsByTagName("span"); // 获得商品名字和价格的span var name = spans[0].innerText; // 获得商品名字 var col_1 = tbody.querySelectorAll("td:nth-child(2)"); // nth-child 作为第几个孩子 var found = null; // found 变量代表购物车中找到的td for(var i = 0; i<col_1.length; i++) { if( col_1[i].innerText == name) { found = col_1[i]; break; } } if(found != null) { //商品名字存在 // 修改数量 found 是找到的td var tr = found.parentNode; var input = tr.querySelector("td:nth-child(5)>input:last-child"); console.log(input); jia(input); } else { //商品名字不存在 // 添加商品 var tr = document.createElement("tr"); var th = document.createElement("th"); th.innerHTML = '<input type="checkbox" checked onclick="calculate()">'; var td1 = document.createElement("td"); td1.innerText = spans[0].innerText; var td2 = document.createElement("td"); var img = document.createElement("img"); img.src = div.getElementsByTagName("img")[0].src; img.width = "100"; td2.appendChild(img); var td3 = document.createElement("td"); td3.innerText = spans[1].innerText; var td4 = document.createElement("td"); td4.innerHTML = '<input type="button" value="-" onclick="jian(this)"><input type="number" value="1"><input type="button" value="+" onclick="jia(this)">'; var td5 = document.createElement("td"); td5.innerHTML = '<input type="button" value="移除" onclick="del(this)">'; tr.appendChild(th); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); tr.appendChild(td5); tbody.appendChild(tr); calculate(); } } </script></head><body> <!--这里写购物车代码--> <div> <table border="1" width="100%"> <thead> <tr> <th><input type="checkbox" onclick="check(this)"></th> <th>图片</th> <th>名称</th> <th>价格</th> <th>数量</th> <th>移除</th> </tr> </thead> <tbody id="tb"> <tr> <th><input type="checkbox" onclick="calculate()"></th> <td>商品1</td> <td><img src="images/5a0cf6bfN92a5a597.jpg" width="100"></td> <td>3000.00</td> <td> <input type="button" value="-" onclick="jian(this)"> <input type="number" value="1"> <input type="button" value="+" onclick="jia(this)"> </td> <td><input type="button" value="移除" onclick="del(this)"></td> </tr> <tr> <th><input type="checkbox" onclick="calculate()"></th> <td>商品2</td> <td><img src="images/5a0cf672N3c785b7a.jpg" width="100"></td> <td>2000.00</td> <td> <input type="button" value="-" onclick="jian(this)"> <input type="number" value="1"> <input type="button" value="+" onclick="jia(this)"> </td> <td><input type="button" value="移除" onclick="del(this)"></td> </tr> </tbody> <tfoot> <tr> <td colspan="6">总价<span id="total">0</span> 元</td> </tr> </tfoot> </table> </div> <!-- 商品列表 --> <div class="row"> <div class="col"> <p><span>商品1</span>价格:<span>3000.00</span></p> <img src="images/5a0cf6bfN92a5a597.jpg"> <input type="button" value="添加至购物车" onclick="add(this)"> </div> <div class="col"> <p><span>商品2</span>价格:<span>2000.00</span></p> <img src="images/5a0cf672N3c785b7a.jpg"> <input type="button" value="添加至购物车" onclick="add(this)"> </div> <div class="col"> <p><span>商品3</span>价格:<span>4000.00</span></p> <img src="images/5a1f5ed3Nfa577958.jpg"> <input type="button" value="添加至购物车" onclick="add(this)"> </div> <div class="col"> <p><span>商品4</span>价格:<span>3500.00</span></p> <img src="images/5a1f5664Nfa934fac.jpg"> <input type="button" value="添加至购物车" onclick="add(this)"> </div> </div></body></html> |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_38454165/article/details/82424568
