网页购物车代码html+css+jQuery 实现购物车功能
购物车
效果展⽰
1. 搭建简单的架⼦<!DOCTYPE html><html >    <head >        <title >购物车</title >        <meta charset ="utf-8"/>        <script src ="../jquery-1.9.1.min.js "></script >    </head >    <body >        <h1>真划算</h1>        <table >            <tr >                <th >商品</th >                <th >单价(元)</th >                <th >颜⾊</th >                <th >库存</th >                <th >好评率</th >                <th >操作</th >            </tr >            <tr >                <td >罗技M185⿏标</td >                <td >80</td >                <td >⿊⾊</td >                <td >893</td >                <td >98%</td >                <td align ="center ">                    <input type ="button " value ="加⼊购物车" onclick ="add_shoppingcart(this);"/>                </td >            </tr >            <tr >                <td >微软X470键盘</td >
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
<td >微软X470键盘</td >                <td >150</td >                <td >⿊⾊</td >                <td >9028</td >                <td >96%</td >                <td align ="center ">                    <input type ="button " value ="加⼊购物车" onclick ="add_shoppingcart(this);"/>                </td >            </tr >            <tr >                <td >洛克iphone11⼿机壳</td >                <td >60</td >                <td >透明</td >                <td >672</td >                <td >99%</td >                <td align ="center ">                    <input type ="button " value ="加⼊购物车" onclick ="add_shoppingcart(this);"/>                </td >            </tr >            <tr >                <td >蓝⽛⽿机</td >                <td >100</td >                <td >蓝⾊</td >                <td >8937</td >                <td >95%</td >                <td align ="center ">                    <input type ="button " value ="加⼊购物车" onclick ="add_shoppingcart(this);"/>                </td >            </tr >            <tr >                <td >⾦⼠顿U 盘</td >                <td >70</td >                <td >红⾊</td >                <td >482</td >                <td >100%</td >                <td align ="center ">                    <input type ="button " value ="加⼊购物车" onclick ="add_shoppingcart(this);"/>                </td >            </tr >        </table >        <h1>购物车</h1>        <table >            <thead >            <tr >                <th >商品</th >                <th >单价(元)</th >                <th >数量</th >                <th >⾦额(元)</th >                <th >删除</th >            </tr
>            </thead >            <tbody id ="goods ">            </tbody >            <tfoot >            <tr >                <td colspan ="3" align ="right ">总计</td >                <td id ="total ">0</td >                <td ></td >            </tr >            </tfoot >        </table >    </body ></html >
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
2. 增加样式
3. jQuery 实现功能
注意：1. 点击加⼊购车之后，会在下⾯的表⾥增加该商品的信息，该功能由add_shoppingcart(btn)函数实现，也就是给表格增加⼀个孩⼦(⽗
节点.append(⼦节点))，并且要在相应的显⽰⾦额的地⽅增加相应的⾦额
2. 可以给1步骤优化以下，如果该商品已经添加过购物车了，那么再添加的话，不应该是再增加⼀⾏，⽽应该是在该商品的数量上加1，
所以在上⾯增加⼦节点的时候应该加⼀个判断
3. 每⼀⾏代表的是同⼀个商品，那么该⾏的⾦额显⽰那⼀块就应该显⽰的是：该商品数量x商品的单价
4. 该程序中使⽤了jQuery框架，所以需要保证你的已经下载了这个框架，下⾯代码的第⼀⾏，src="…/xxxxxxxxx"，其中的…表⽰上
⼀级⽬录，及我的jQuery的这个js⽂件在这个html⽂件的上⼀个⽬录。
<style type="text/css">    h1 {        text-align : center ;}table  {    margin : 0 auto ;    width : 60%;    border : 2px solid #aaa ;    border-collapse : collapse ;}table th, table td  {    border : 2px solid #aaa ;    padding : 5px ;}th  {    background-color : #eee ;}</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<script src ="../jquery-1.9.1.min.js"></script ><script >        //加⼊购物车        function  add_shoppingcart (btn ) {            // 判断要加⼊购物车的商品是否已经在购物车中存在            var  $tr = $(btn ).parents ("tr"); //  到点击事件的那⼀⾏            var  name = $tr .children ("td:eq(0)").html ();            var  state = $("#goods td:contains("+name +")");            var  price = $tr .children ("td:eq(1)").html ();            if  (state .length == 0){                // 说明该商品尚未加⼊购物车                var  node = "<tr><td>"+name +"</td>"+                        "<td>"+price +"</td>"+                        "<td><input type='button' οnclick='decrease(this)' value='-'/>" +                        "<input type='text' size='3' value='1'/>"+                        "<input type='button' οnclick='increase(this)' value='+'/>"+                        "</td><td>"+price +"</td><td><input type='button' value='x' οnclick='del(this)'/></td></tr>";                // console.log((node));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// console.log((node));                $("#goods").append (node );                // 修改总⾦额                // console.log("总⾦额增加："+price);                setTotal (price );            } else  {                // 该商品已经加⼊购物车                // 到该商品所在位置，在数量上加1                increase (state .parent ().children ("td:eq(2)").children ("input:eq(2)")[0]);            }        }        function  decrease (btn ) {            // 到该⾏的总⾦额那⼀列            var  total = $(btn ).parent ().next ("td");            // 到该商品在购物车⾥的数量对应的节点            var  num = $(btn ).next ("input");            // 获取单价            var  price = $(btn ).parent ().prev ("td").html ();            if  (parseInt (num .val ()) <= 0){                num .val ("0");            } else  {                num .val (parseInt (num .val ())-1);                // 修改总⾦额total.html(parseInt(num.val())*parseInt(price));                // 修改购物车的总⾦额                setTotal (-parseInt (price ));            }        }        function  increase (btn ){            // 到该⾏的总⾦额那⼀列            var  total = $(btn ).parent ().next ("td");            // 获取单价            var  price = $(btn ).parent ().prev ("td").html ();            // 到该商品在购物车⾥的数量对应的节点            var  num = $(btn ).prev ("input");            // console.log(num.val());            num .val (parseInt (num .val ())+1);            // 修改总额            total .html (parseInt (num .val ())*parseInt (price ));            // 修改购物车的总⾦额            set
Total (price );        }        function  del (btn ){            // 删除按钮            // 获取删除节点对应的节点            var  $td = $(btn ).parent ();            // 获取该商品总共的⾦额（数量*单价）            var  total = $td .prev ("td").html ();            // 删除该⾏            $td .parent ().remove ();            // 修改总额            setTotal (-total );        }        function  setTotal (price ){            // 修改购物车总⾦额            console .log ("要修改的总额："+price );            var  total = $("tfoot td:eq(1)");            total .html (parseInt (total .html ())+parseInt (price ));        }</script >181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
83

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