您的位置: 首页  >  文章  >  简易的购物车功能实现 --- 19/03/20

简易的购物车功能实现 --- 19/03/20

分类: 文章 • 2024-09-07 17:51:10

本次使用的JS包为JQuery2.0版本

简单的实现界面：
简易的购物车功能实现 --- 19/03/20
以下为实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            width: 50%;
            margin: auto;
            padding-top: 50px;
        }
        input[type=number]{
            width: 30px;
        }
        table{
            text-align: center;
        }
        p{
            text-align: right;
            color: red;
            font-size: 30px;
        }
    </style>
    <script src="js/jquery2.0.js"></script>
</head>
<body>
    <form>
        商品名称：<input type="text" placeholder="请输入商品名称" id="goodsName" required>
        &nbsp;数量：<button type="button" class="decrease">-</button><input type="number" id="goodsNum" min="1" value="1" required><button type="button" class="add">+</button>
        &nbsp;单价：<input type="text" id="goodsPrice" required pattern="^-?([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$"><p></p>
        <button type="submit" id="submit">加入购物车</button>&nbsp;<button type="reset">重新输入</button>
    </form>
    <hr>
    <table width="100%" border="1" cellpadding="10" cellspacing="0">
        <thead>
        <tr>
           <th><input type="checkbox" id="checkAll"></th>
           <th>序号</th>
           <th>商品名称</th>
           <th>单价（￥）</th>
           <th>数量</th>
           <th>小计（￥）</th>
           <th>操作</th>
        </tr>
        </thead>
        <tr>
            <td><input type="checkbox"></td>
            <td>1</td>
            <td>舒适鞋子</td>
            <td>500.00</td>
            <td><button type="button" class="decrease">-</button><input type="number" min="1" value="1" required><button type="button" class="add">+</button></td>
            <td>500.00</td>
            <td><button>X</button></td>
        </tr>
    </table>
    <p>结算（费用计：￥<span>0</span>）</p>
</body>
</html>
<script>
    $(function () {
        //减
        $(".decrease").click(function () {
            if($(this).next().val() <=1){
                return;
            }
            $(this).next().val($(this).next().val()-1);
        })
        //加
        $(".add").click(function () {
            $(this).prev().val(Number($(this).prev().val())+1);
        })
        //添加商品到购物车
        $("form").submit(function () {
            var name = $("#goodsName").val();
            var num = $("#goodsNum").val();
            var price = Number($("#goodsPrice").val());
            var id = Number($("tbody tr:last-of-type td:nth-of-type(2)").text())+1;
            var node = '<tr>\n' +
                '            <td><input type="checkbox"></td>\n' +
                '            <td>'+id+'</td>\n' +
                '            <td>'+name+'</td>\n' +
                '            <td>'+price.toFixed(2)+'</td>\n' +
                '            <td><button type="button" class="decrease">-</button><input type="number" min="1" value="1" required><button type="button" class="add">+</button></td>\n' +
                '            <td>'+(num*price).toFixed(2)+'</td>\n' +
                '            <td><button>X</button></td>\n' +
                '        </tr>'
            $("table").append(node);
            return false;
        })
        //删除
        $("table").on('click','td:last-of-type button',function () {
            $(this).parents('tr').remove();
            countPrice();
        })
        //全选与全不选
        $("#checkAll").click(function () {
            $("input[type=checkbox]").prop("checked",$(this).prop('checked'));
            countPrice();
        })
        //单个复选框点击
        $("tbody").on('click','input[type=checkbox]',function () {
            $("#checkAll").prop('checked',$("tbody input[type=checkbox]").size() === $("tbody input[type=checkbox]:checked").size());
            countPrice();
        })
        //结算费用
        function countPrice() {
            var sum = 0;
            $("tbody input[type=checkbox]:checked").each(function () {
                sum += Number($(this).parents('tr').children('td:nth-last-of-type(2)').text());
            })
            $("p span").text(sum.toFixed(2));
        }
    })
</script>

运用到的知识点：

 1. 事件委托
 2. 节点添加
 3. 节点删除
 4. 节点获取（进阶选择器）
 5. H5表单新属性的运用  pattern   required的应用场景
 6. 全选全不选
 7. 底下的复选框控制全选全不选

需要注意的地方：

①：button在form表单中，具备提交功能，应该指明button的 type 属性
②：button只有在 submit 时才具备验证功能（required/pattern属性规则才能被验证出来）
③：阻止表单提交 return false
④：attr与prop的区别
⑤：toFixed(2) ‘2’ 表示保留两位小数

相关推荐