js写购物车

最新推荐文章于 2024-09-28 23:02:25 发布

威震天ovo

最新推荐文章于 2024-09-28 23:02:25 发布

阅读量451

点赞数 1

文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_53366569/article/details/129900641

版权

本文将介绍如何利用JavaScript来创建一个购物车功能，包括添加商品、删除商品、计算总价等核心操作，同时结合HTML和CSS实现交互界面。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i2/50078981/O1CN01N3mQ9S2GDLtIrz1af_!!2-saturn_solar.png_580x580Q90.jpg_.webp" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="https://img.alicdn.com/imgextra/i2/1917047079/O1CN01whuqS122AEWlWj2Cf_!!1917047079.png_430x430q90.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="https://img.alicdn.com/imgextra/i1/1917047079/O1CN01h8eEJX22AEWmwkf4L_!!0-item_pic.jpg_430x430q90.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1