-
Notifications
You must be signed in to change notification settings - Fork 0
/
shop-cart.html
281 lines (263 loc) · 8.07 KB
/
shop-cart.html
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
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="Description" content="购物车 使用flexbox的布局">
<title>购物车</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
font-size: 14px;
font-family: "微软雅黑"
}
html,
body{
height: 100%;
}
.shop-wrap{
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
height: 100%;
justify-content: space-between;
background: #fcf2f2;
}
.shop-info {
align-self: flex-start;
-webkit-align-self: flex-start;
width: 100%;
overflow: scroll;
}
.shop-info li {
padding: 15px 10px;
border-bottom: 4px solid #fff;
list-style: none;
display: flex;
justify-content: space-between;
}
.shop-info li:last-child {
border-bottom: none;
}
.shop-info li a {
line-height: 1.5em;
text-decoration: none;
}
.shop-info .shop-info-show {
padding-right: 8px;
}
.shop-info .shop-info-show p{
color: #ea5f02;
font-size: 12px;
}
.shop-info .shop-info-show p span{
font-size: 12px;
}
.shop-info li form {
min-width: 85px;
margin-top: 5px;
}
.shop-info li form input {
width: 25px;
height: 25px;
text-align: center;
}
.shop-info li form .shop-number{
}
.shop-footer {
align-self: flex-end;
-webkit-align-self: flex-end;
width: 100%;
background: #ea5f02;
color: #fff;
display: none;
}
.shop-footer .shop-total {
display: flex;
justify-content: space-between;
}
.shop-footer .shop-total .total {
padding: 10px;
}
.shop-footer .shop-total .total-btn{
min-width: 80px;
text-align: center;
}
input[type="button"] {
background: #ea5f02;
color: #fff;
outline: none;
border: none;
}
button {
background: #c40303;
color: #fff;
outline: none;
border: none;
}
</style>
</head>
<body>
<div class="shop-wrap">
<ul id="shop-info" class="shop-info">
<li>
<div class="shop-info-show">
<a href="javascript:void(0)">2016冬装新款森马品牌冬季新品男士牛仔裤 商品号：95803585 尺码：M 颜色：blue</a>
<p>￥<span class="price">49.9</span></p>
</div>
<form action="">
<input class="less-number" type="button" value="-">
<input class="shop-number" readonly type="text" value="0">
<input class="add-number" type="button" value="+">
</form>
</li>
<li>
<div class="shop-info-show">
<a href="javascript:void(0)">以纯官方旗舰店冬季新款潮流女士圆领毛衣 商品号：958035481385 尺码：M 颜色：blue</a>
<p>￥<span class="price">109.9</span></p>
</div>
<form action="">
<input class="less-number" type="button" value="-">
<input class="shop-number" readonly type="text" value="0">
<input class="add-number" type="button" value="+">
</form>
</li>
<li>
<div class="shop-info-show">
<a href="javascript:void(0)">屈臣氏2016新款洗发水去屑柔顺拉芳品牌代言人赵薇 商品号：958035481385 尺码：500ML</a>
<p>￥<span class="price">119.9</span></p>
</div>
<form action="">
<input class="less-number" type="button" value="-">
<input class="shop-number" readonly type="text" value="0">
<input class="add-number" type="button" value="+">
</form>
</li>
<li>
<div class="shop-info-show">
<a href="javascript:void(0)">2016好爸爸、蓝月亮洗衣液家庭必备套装 商品号：958035481385 尺码：1L</a>
<p>￥<span class="price">29.9</span></p>
</div>
<form action="">
<input class="less-number" type="button" value="-">
<input class="shop-number" readonly type="text" value="0">
<input class="add-number" type="button" value="+">
</form>
</li>
<li>
<div class="shop-info-show">
<a href="javascript:void(0)">德国最新款防噪音耳塞多种颜色可选品牌旗舰店销售 商品号：958035481385 颜色：紫色 尺码：均码</a>
<p>￥<span class="price">9.9</span></p>
</div>
<form action="">
<input class="less-number" type="button" value="-">
<input class="shop-number" readonly type="text" value="0">
<input class="add-number" type="button" value="+">
</form>
</li>
<li>
<div class="shop-info-show">
<a href="javascript:void(0)">冬季防冻裂屈臣氏护手霜两支装超值换算 商品号：455235295881385 尺码：300ML</a>
<p>￥<span class="price">39.9</span></p>
</div>
<form action="">
<input class="less-number" type="button" value="-">
<input class="shop-number" readonly type="text" value="0">
<input class="add-number" type="button" value="+">
</form>
</li>
</ul>
<div id="shop-footer" class="shop-footer">
<div class="shop-total">
<p class="total total-money">合计：￥<span id="total-price">0</span></p>
<button class="total total-btn" type="button">结算(<span id="total-shop-num">0</span>)</button>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
//封装绑定的方法：
var util = {
addHand: function(ele, type, callback) {
if (ele.addEventListener) {
return ele.addEventListener(type, callback);
} else if (ele.attachEvent) {
return ele.attachEvent(type, callback);
} else {
ele['on' + type] = callback;
}
}
};
// function add
var oInfo = document.getElementById('shop-info'),
aLi = oInfo.getElementsByTagName('li'),
oFooter = document.getElementById('shop-footer'),
//商品单价数据数组
priceArr = document.getElementsByClassName('price'),
//减少商品个数按钮数组
lessArr = document.getElementsByClassName('less-number'),
//商品个数展示数组
addArr = document.getElementsByClassName('add-number'),
//增加商品个数按钮数组
shopNum = document.getElementsByClassName('shop-number'),
//结算处商品总价
totalPrice = document.getElementById('total-price'),
//结算处商品总数
totalShopNum = document.getElementById('total-shop-num');
var len = aLi.length;
for(var i = 0; i < len; i++) {
//增加索引
lessArr[i].index = addArr[i].index = i;
//定义一个变量表示所有的商品总数
var numTotal = 0,
priceTotal = 0;
//减少商品个数
util.addHand(lessArr[i], 'click', function(){
//每次点击减少商品个数的时候就要重新计算一下当前所有的商品个数总和
numTotal = 0;
for(var j = 0; j < len; j ++ ){
numTotal += Number(shopNum[j].value);
}
//每次点击减少商品个数的时候就要重新计算一下当前所有的商品价格总和
priceTotal = 0;
for(var m = 0; m < len; m++) {
priceTotal += Number(shopNum[m].value) * priceArr[m].innerHTML
}
//当个数大于0的时候点击才会有效果
if (shopNum[this.index].value > 0) {
shopNum[this.index].value --;
numTotal --;
priceTotal -= priceArr[this.index].innerHTML;
}
//当商品总和为0的时候 底部的结算不显示
if (numTotal == 0) {
oFooter.style.display = "none";
}
//结算处商品总数以及商品总价的显示
totalShopNum.innerHTML = numTotal;
totalPrice.innerHTML = parseFloat(priceTotal).toFixed(2);
});
//增加商品个数
util.addHand(addArr[i], 'click', function(){
shopNum[this.index].value ++;
numTotal ++;
priceTotal = 0;
for(var m = 0; m < len; m++) {
priceTotal += Number(shopNum[m].value) * priceArr[m].innerHTML
}
//结算处商品总数以及商品总价的显示
oFooter.style.display = 'block';
totalShopNum.innerHTML = numTotal;
totalPrice.innerHTML = parseFloat(priceTotal).toFixed(2);
});
};
}
</script>
</body>
</html>