使用原生JavaScript实现购物车的功能模块

HarmonyOS技术分享

已于 2024-11-12 13:40:16 修改

阅读量2.3k

点赞数 52

文章标签： javascript 前端

于 2024-11-12 13:35:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50985468/article/details/143703736

版权

使用原生JavaScript实现购物车的功能模块

功能思路分析

购物车功能包括添加商品（需判断购物车是否为空及商品是否已存在），调整商品数量（包括增加和减少，并考虑库存限制），计算商品总价（单个商品及购物车内所有商品），删除商品（单个或多个选中商品），以及全选和反选功能来批量操作商品，并计算选中商品的总价。

HTML结构搭建

字段集（<fieldset>）：用于将购物车相关的元素分组，提高可读性。

商品信息输入：包含三个<input>元素，分别用于输入商品名称、单价和数量。

添加按钮：一个<button>元素，用户点击后将触发添加商品到购物车的操作。

商品列表展示：一个<table>元素，用于展示购物车中的商品列表。

全选复选框：在表格头部，用于全选或取消全选所有商品。

删除按钮：用于删除选中的商品。

总价显示：显示购物车中所有商品的总价。

<fieldset id=""> 
            <legend>购物车</legend>
            <div id="">
                商品名称:<input type="text" id="goodsName" /> 商品单价:<input
                    type="text"
                    id="goodsPrice"
                />
                商品数量:<input type="text" id="goodsNum" />
                <button onclick="addgoods()">加入购物车</button>
            </div>
            <table width="800px" border="1">
                <thead>
                    <tr>
                        <th>
                            全选
                            <input
                                id="chkAll"
                                onclick="checkAll(this)"
                                type="checkbox"
                            />
                        </th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>商品总价</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="tbody"></tbody>
            </table>

            <button id="aaaaa" onclick="delCheckGoods()">删除选中商品</button>
            总价：<span id="zongjia">0</span>
        </fieldset>

CSS样式（可选）

整体布局调整：字段集（<fieldset>）宽度和居中

表格行样式统一：表格行（<tr>）高度和文本对齐

特定元素样式调整：删除按钮（#aaaaa）位置调整

<style type="text/css">
            fieldset {
                width: 800px;
                /*text-align: center;*/
                margin: auto;
            }
            tr {
                height: 30px;
                text-align: center;
            }
            #aaaaa {
                margin-right: 540px;
            }
        </style>

JavaScript交互

最低0.47元/天解锁文章