这次的效果如下图：
实现的效果是在购物车界面选择想要选购的商品，提交后转到支付界面确认支付，最后支付成功后返回选购页面。
我们这篇文章只讲解选购的页面，支付界面见这篇文章：https://xinxin-l.github.io/2022/02/15/%E3%80%90javaScript%E6%A1%88%E4%BE%8B%E3%80%91%E4%B9%8B%E6%94%AF%E4%BB%9810%E7%A7%92%E5%80%92%E8%AE%A1%E6%97%B6/
我们开始咯~
我们首先来实现html和css的部分：如下图
其实这个部分很考验基础功~，我们需要用到table标签，在td中写入对应的文字（具体可见下方的代码，可以根据自己的喜好添加样式）。
重点其实在于js的部分：
这个效果实现的基本功能如下：
- 勾选/不勾选第一列的框，对应第五列的小计中的价格会改变，下方的合计价格会改变
- 选择第一行第一列的全选按钮，下方所有的复选框都会被选中，对应的小计和合计中的价格都会发生改变
- 选择第四列中的-和+，表示要选购该物品的数目，相应的小计和合计中的价格会发生改变
- 点击最后一列的删除键，相应的行会消失，同时合计数目会发生改变
要从哪下手呢，我们按照顺序来解决~
- 我们首先通过
document.getElementsByTagName获取所有的复选框，然后通过onclick函数修改其checked属性，表示选中/不选中。要记住必须要通过一个变量来表示是从选中->未选中，还是未选中->选中。然后如何修改其内容呢？ 我们可以通过parentNode来选出复选框对应的父节点，再在该父节点中选出对应小计中的innerText，修改其内容（要对应前面的单价）=======这样第一点就完成啦，其实还要多研究细节，有很多需要在注意的细节 - 关于全选实现的效果，我们可以和复选框修改内容使用部分相同的代码，（具体可见下面的代码），要记住我们还是需要记录一个变量来判断复选框是否被全选->判断对应的价格是否要发生变化。
- 关于通过加减来修改选购物品的数目，需要多加思考，因为涉及选购数目、小计价格、总计价格的改变，但是大概的思路跟第一点类似，就是通过该节点找到其父节点，然后修改该父节点下的不同子节点的
innerText（但是在修改之前要判断一下对应的复选框是否被选中，若未被选中，就不需要改变相关价格了~） - 最后一点，其实就简单啦，点击删除按钮的时候，我们需要修改的只有两点：一是
display:none，二是如果复选框被选中，需要修改对应的合计的价格
好啦，大概思路就是以上几点啦，具体内容可以参考下面的代码：
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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
table{
text-align: center;
margin:60px auto;
margin-bottom: 20px;
width:500px;
border-radius: 20px;
border-spacing: 2px;
}
table td{
border:2px solid rgba(0,0,0,.3);
margin:0;
width: 70px;
height:60px;
border-radius: 20px;
box-shadow: 2px 3px 2px rgba(0,0,0,.3);
}
#hd td{
font-weight:560;
}
tr :nth-child(6){
cursor: pointer;
}
#bott{
text-align: right;
width: 450px;
margin: 30px auto;
font-size:23px;
}
#btn{
width: 50px;
}
table td input{
width: 16px;
height: 16px;
}
.f,.z{
margin: 0 5px;
width: 17px;
}
table td,table button{
background-color: rgba(135, 207, 235, 0.56);
}
#sub{
width: 70px;
height: 35px;
margin-left: 60px;
}
</style>
</head>
<body>
<table>
<tr id="hd">
<td><button id="btn" style="background-color: snow;">全选</button></td>
<td>商品名称</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td style="cursor: auto;">操作</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="a"></td><td>巧克力</td><td>200</td><td><button class="f">-</button><span>1</span><button class="z">+</button></td><td>200</td><td class="del">删除</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="b"></td><td>奥利奥</td><td>100</td><td><button class="f">-</button><span>2</span><button class="z">+</button></td><td>200</td><td class="del">删除</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="c"></td><td>薯片</td><td>50</td><td><button class="f">-</button><span>2</span><button class="z">+</button></td><td>100</td><td class="del">删除</td>
</tr>
<tr>
<td><input type="checkbox" name="" id="c"></td><td>奶茶</td><td>20</td><td><button class="f">-</button><span>2</span><button class="z">+</button></td><td>40</td><td class="del">删除</td>
</tr>
</table>
<div id="bott">
<span>总计：</span>
<span id="total"></span>
<button type="submit" id="sub">提交</button>
</div>
<script>
let btns=document.getElementsByTagName("input");
let total=document.getElementById("total");
let f=document.getElementsByClassName("f");
let z=document.getElementsByClassName("z");
let del=document.getElementsByClassName("del");
let sub=document.getElementById("sub");
document.getElementById("btn").onclick=function(){
let tem=true;
for(let i=0;i<btns.length;i++){
let before=btns[i].checked;
if(before===false){
tem=false;
}
btns[i].checked=true;
click(i,before);
}
if(tem){
total.innerText=0;
for(let i=0;i<btns.length;i++){
btns[i].checked=false;
}
}
}
total.innerText=0;
for(let i=0;i<btns.length;i++){
let before=btns[i].checked;
btns[i].onclick=function(){
if(btns[i].checked===false){
before=true;
}
if(btns[i].checked===true){
before=false;
}
click(i,before);
}
}
function click(i,before){
console.log(btns[i].checked);
console.log(before)
let par=btns[i].parentNode.parentNode;
let price=par.childNodes[5].innerText;
console.log(price)
if(btns[i].checked === true && before === false && par.style.display!=="none"){
total.innerText = parseInt(total.innerText)+parseInt(price);
}
if(btns[i].checked === false && before === true && par.style.display!=="none"){
total.innerText = parseInt(total.innerText)-parseInt(price);
}
}
for(let i=0;i<f.length;i++){
f[i].onclick=function(){
let num=Math.abs(parseInt(f[i].parentNode.innerText));
let par=f[i].parentNode.parentNode;
let little=parseInt(par.childNodes[5].innerText);
let single=parseInt(par.childNodes[3].innerText);
if(num > 0){
num--;
f[i].parentNode.childNodes[1].innerText=num;
par.childNodes[5].innerText=little-single;
if(btns[i].checked===true){
total.innerText = parseInt(total.innerText)-single;
}
}
}
z[i].onclick=function(){
let num=Math.abs(parseInt(f[i].parentNode.innerText));
let par=f[i].parentNode.parentNode;
let little=parseInt(par.childNodes[5].innerText);
let single=parseInt(par.childNodes[3].innerText);
num++;
f[i].parentNode.childNodes[1].innerText=num;
par.childNodes[5].innerText=little+single;
if(btns[i].checked===true){
total.innerText = parseInt(total.innerText)+single;
}
}
}
for(let i=0;i<del.length;i++){
del[i].onclick=function(){
let par=del[i].parentNode;
par.style.display="none";
if(btns[i].checked===true){
total.innerText = parseInt(total.innerText) - parseInt(par.childNodes[5].innerText);
}
}
}
sub.onclick=function(){
alert("总消费"+total.innerText+"元，确定要支付吗？");
for(let i=0;i<btns.length;i++){
btns[i].checked=false;
}
total.innerText=0;
location.href="../特效/支付10秒钟.html";
}
</script>
</body>
</html>
|
