更新时间:2021-11-25 11:54:05
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
|
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "renderer" content = "webkit" >
< title >A03号桌</ title >
< link rel = "stylesheet" href = "resources/css/main.css" >
</ head >
< body >
<!--购物车-->
< div class = "shopCart" >
<!--可以在table外面套一个div写死宽高并设置overflow-y:scroll;,出现大量内容时,让table纵向滚动-->
< div class = "cartBox" >
< table class = "cart" >
< thead >
< tr >
< th >菜品名称</ th >
< th >数量</ th >
< th >单价</ th >
< th >价格</ th >
</ tr >
</ thead >
< tbody >
< tr >
< td >大闸蟹</ td >
< td >
< button class = "add" >+</ button >
< span class = "count" >1</ span >
< button class = "reduce" >-</ button >
</ td >
< td >
¥< span class = "price" >68.00</ span >
</ td >
< td >
¥< span class = "sub_total" >68.00</ span >
</ td >
</ tr >
< tr >
< td >在天愿作比翼鸟</ td >
< td >
< button class = "add" >+</ button >
< span class = "count" >1</ span >
< button class = "reduce" >-</ button >
</ td >
< td >
¥< span class = "price" >68.00</ span >
</ td >
< td >
¥< span class = "sub_total" >68.00</ span >
</ td >
</ tr >
< tr >
< td >红嘴绿鹦哥</ td >
< td >
< button class = "add" >+</ button >
< span class = "count" >1</ span >
< button class = "reduce" >-</ button >
</ td >
< td >
¥< span class = "price" >68.00</ span >
</ td >
< td >
¥< span class = "sub_total" >68.00</ span >
</ td >
</ tr >
</ tbody >
</ table >
</ div >
< ul class = "totalInfo clearfix" >
< li >
< span class = "total" >
合计:< i >¥</ i >< b >242.00</ b >
</ span >
</ li >
< li >
< button class = "btn-save" >保存</ button >
</ li >
</ ul >
</ div >
< script src = "resources/js/jquery-1.8.3.min.js" ></ script >
< script src = "resources/js/shopCart.js" ></ script >
</ body >
</ html >
|
JS代码:
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
|
/****点击增加按钮****/ $( '.add' ).click( function (){
//修改数量
var n=$( this ).next().html();
var num=parseInt(n)+1;
$( this ).next().html(num);
//计算价格
var c= $( this ).parent().siblings().children( '.price' ).html();
parseInt(c);
var subPrice = num * c;
var sub_price = subPrice.toFixed(2); //保留小数点后面两位小数
$( this ).parent().siblings().children( '.sub_total' ).html(sub_price);
//计算总价
var total=0;
$( '.sub_total' ).each( function (){
var price=parseInt($( this ).html());
total+=price;
var total_price = total.toFixed(2);
$( '.total b' ).html(total_price);
});
}); /****点击减少按钮****/ $( '.reduce' ).click( function (){
//修改数量
var n=$( this ).prev().html();
var num=parseInt(n)-1;
if (num==0){ return ;} //数量减到0就能再减了
$( this ).prev().html(num);
//计算价格
var c= $( this ).parent().siblings().children( '.price' ).html();
parseInt(c);
var subPrice = num * c;
subPrice.toFixed(2);
var sub_price = subPrice.toFixed(2);
$( this ).parent().siblings().children( '.sub_total' ).html(sub_price);
//计算总价
var total=0;
$( '.sub_total' ).each( function (){
var price=parseInt($( this ).html());
total+=price;
var total_price = total.toFixed(2);
$( '.total b' ).html(total_price);
});
}); |
考虑到篇幅问题,没有贴出CSS代码,最终页面截图如下:
本文转自 frwupeng517 51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1863852