html+css+jQuery实现购物车功能

购物车

效果展示
html+css+jQuery实现购物车功能_第1张图片

1. 搭建简单的架子


<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>80td>
                <td>黑色td>
                <td>893td>
                <td>98%td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
                td>
            tr>
            <tr>
                <td>微软X470键盘td>
                <td>150td>
                <td>黑色td>
                <td>9028td>
                <td>96%td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
                td>
            tr>
            <tr>
                <td>洛克iphone11手机壳td>
                <td>60td>
                <td>透明td>
                <td>672td>
                <td>99%td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
                td>
            tr>
            <tr>
                <td>蓝牙耳机td>
                <td>100td>
                <td>蓝色td>
                <td>8937td>
                <td>95%td>
                <td align="center">
                    <input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
                td>
            tr>
            <tr>
                <td>金士顿U盘td>
                <td>70td>
                <td>红色td>
                <td>482td>
                <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">0td>
                <td>td>
            tr>
            tfoot>
        table>
    body>
html>

2. 增加样式


3. jQuery实现功能

注意:

  1. 点击加入购车之后,会在下面的表里增加该商品的信息,该功能由add_shoppingcart(btn)函数实现,也就是给表格增加一个孩子(父节点.append(子节点)),并且要在相应的显示金额的地方增加相应的金额
  2. 可以给1步骤优化以下,如果该商品已经添加过购物车了,那么再添加的话,不应该是再增加一行,而应该是在该商品的数量上加1,所以在上面增加子节点的时候应该加一个判断
  3. 每一行代表的是同一个商品,那么该行的金额显示那一块就应该显示的是:该商品数量x商品的单价
  4. 该程序中使用了jQuery框架,所以需要保证你的已经下载了这个框架,下面代码的第一行,src="…/xxxxxxxxx",其中的…表示上一级目录,及我的jQuery的这个js文件在这个html文件的上一个目录。
<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 = ""+name+""+
                        ""+price+""+
                        "" +
                        ""+
                        ""+
                        ""+price+"";
                // 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));
            // 修改购物车的总金额
            setTotal(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>

你可能感兴趣的:(Web)