JS实现购物车功能（JS案例）

柔情只为你懂 2022-01-27 09:34 1036阅读 0赞

整理了一下当时学js写的一些案例，觉得购物车功能在一般网站比较常见且基础，现在把它整理出来，需要的小伙伴可以参考一下。  
该案例购物车主要功能如下：  
1、 商品单选、全选、反选功能  
2、 商品添加、删除功能  
3、 商品价格自动计算  
具体效果：  
打开效果  
![image.png][]  
添加商品数量（自动计算价格）：  
![image.png][image.png 1]  
取消选择：  
![image.png][image.png 2]  
删除商品：  
![image.png][image.png 3]  
商品显示与隐藏：  
![image.png][image.png 4]  
做这些案例呢，我还把一些经常使用到的函数成了一个框架，需要的小伙伴，也可以到我的另一篇文章里面自己下载喔，链接：[https://www.jianshu.com/p/e88e15ceabf3][https_www.jianshu.com_p_e88e15ceabf3]  
**html代码：**

<body onselectstart="return false;">
    <template id="temp">
        <tr>
            <td>
                <input type="checkbox" class="check" checked>
            </td>
            <td>
                <img src="images/{src}">{txt}
            </td>
            <td>{price}</td>
            <td>
                <span class="reduce">-</span><input class="text" value="1"><span class="add">+</span>
            </td>
            <td>{subtotal}</td>
            <td>
                <span class="del">删除</span>
            </td>
        </tr>
    </template>
    <div class="box" id="box">
        <table>
            <thead>
            <tr>
                <th>
                    <label>
                        <input type="checkbox" class="checkAll check" checked>全选
                    </label>
                </th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbody">
    
            </tbody>
        </table>
        <div class="bottom" id="bottom">
            <aside>
    
            </aside>
            <label>
                <input type="checkbox" class="checkAll check" checked>全选
            </label>
            <span class="delAll">全部删除</span>
            <div>已选商品：
                <span class="selected" id="num">3</span>件
            </div>
            <a href="#" class="show">显示或隐藏</a>
            <div>合计：￥
                <span class="total" id="total">7000</span>
            </div>
            <div class="js">结算</div>
        </div>
    </div>

**CSS代码**

body {
                background-color: #bcdecf;
            }
    
            div.box {
                width: 700px;
                margin: 50px auto 0;
            }
    
            div.box table {
                border-collapse: collapse;
                width: inherit;
                text-align: center;
                background-color: #f6f6f6;
            }
    
            div.box table td, div.box th {
                border: 1px solid #999;
            }
    
            div.box th {
                height: 40px;
            }
    
            div.box table tbody img {
                height: 50px;
            }
    
            div.box table tbody tr span {
                cursor: default;
            }
    
            div.box table tbody tr td:nth-child(2) img {
                vertical-align: middle;
            }
    
            div.box table tbody tr td:nth-child(4) span {
                display: inline-block;
                width: 15px;
                line-height: 30px;
                background-color: #666;
                color: #eee;
                vertical-align: middle;
            }
    
            div.box table tbody tr td:nth-child(4) input {
                width: 20px;
                height: 20px;
                outline: none;
                vertical-align: middle;
                text-align: center;
            }
    
            div.box table tbody tr td:nth-child(6) span {
                padding: 4px 10px;
                background-color: #999;
                color: white;
            }
    
            div.box div.bottom {
                padding: 15px 0;
                margin-top: 15px;
                height: 25px;
                background-color: white;
                display: flex;
                justify-content: space-between;
                position: relative;
            }
    
            div.box div.bottom span.delAll {
                cursor: default;
            }
    
            div.box div.bottom div.js {
                padding: 0 6px;
                background-color: #00A5FF;
                color: white;
                margin-right: 10px;
                cursor: default;
            }
    
            div.box div.bottom aside div {
                display: inline-block;
            }
    
            div.box div.bottom aside div span {
                position: absolute;
                width: 50px;
                line-height: 20px;
                padding: 0 5px;
                background-color: rgba(255, 255, 255, .4);
                color: #333;
                font-size: 10px;
                margin-left: -60px;
                margin-top: 20px;
                transform: rotate(30deg);
                cursor: pointer;
            }
    
            div.box div.bottom aside img {
                height: 60px;
                vertical-align: middle;
            }
    
            div.box div.bottom aside {
                position: absolute;
                background-color: #0a74cb;
                width: 100%;
                top: -70px;
                padding: 5px;
                box-sizing: border-box;
                display: none;
            }
    
            div.box div.bottom aside.on {
                display: block;
            }
    
            div.box div.bottom aside:after {
                position: absolute;
                content: "";
                border: 10px solid transparent;
                border-top-color: #0a74cb;
                bottom: -19px;
                right: 280px;
            }
    
            div.box div.bottom a, div.box div.bottom a:visited {
                color: #0b97ff;
                text-decoration: none;
            }

**JS代码**

[image.png]: /images/20220127/bd1b444d7b6f4bd9bb1e8c99959e0dfe.png
[image.png 1]: /images/20220127/b8b852f08771462594eac875a318cb71.png
[image.png 2]: /images/20220127/f5aa517ebe004a90a20c1306263feb9f.png
[image.png 3]: /images/20220127/270832bd5fa04cac93c9a49920470a00.png
[image.png 4]: /images/20220127/e6cd3d7823fc48a2807ef7955cae6756.png
[https_www.jianshu.com_p_e88e15ceabf3]: https://www.jianshu.com/p/e88e15ceabf3