简易购物车pc端网页

网页 购物车 简易

功能

• 商品全选反选
• 商品价格排序
• 商品数量加减
  • 输入框正则表达式排除文字
  • 验证输入是否为零
• 价格计算
• 删除选定商品

HTML结构

• form表单里包着table表格
  • form表单传递参数
  • table排版
    • 第一行里装着全选功能按钮、排序功能按钮、删除功能按钮
    • 中间的每一行(tr)即为商品
      • 选定、商品图片、商品细节、数量加减、价格显示
    • 最后一行里是价格合计的显示、付款的按钮(form表单提交)

功能实现

全选反选、价格排序、数量加减、价格计算各封装为函数模块。

相互关联体现在例如：

• 在每个对价格产生影响的模块里调用价格计算。
• 价格计算模块计算被选定的商品。

关系图

箭头所指为影响到的模块

以下是页面效果动图以及代码

效果图

html代码

<div class="cart-main">
        <div class="w">
            <div class="title">
                <h2>购物车</h2>
            </div>
            <form action="" method="post">
                <table>
                    <!-- 功能行 -->
                    <thead>
                        <tr>
                            <!-- 全选反选 -->
                            <td class="col1">
                                <label>
                                    <input type="checkbox" name="" class="check_all" checked="checked">
                                    全选
                                </label>
                            </td>
                            <!-- 价格排序按钮 -->
                            <td>
                                <input type="button" value="价格排序" class="sort">
                            </td>
                            <!-- 删除功能按钮 -->
                            <td colspan="3">
                                <input type="button" value="删除所选" class="delPro fr">
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 商品 -->
                        <tr class="items">
                            <!-- 选择按钮 -->
                            <td>
                                <input type="checkbox" name="" class="check">
                            </td>
                            <!-- 商品图片 -->
                            <td class="pic">
                                <img src="upload/20160809110859252.jpg" alt="">
                            </td>
                            <!-- 商品细节 -->
                            <td class="details">
                                <h3>产品名xxxx</h3>
                                <p>描述描述描述描述描述描述</p>
                            </td>
                            <!-- 数量操作 -->
                            <td class="sum_btn">
                                <i class="plus fl">+</i>
                                <input type="text" class="sum fl" value="1" name="item_sum">
                                <i class="sub fl">-</i>
                            </td>
                            <!-- 价格显示 -->