原生js--购物车案例

最新推荐文章于 2023-08-24 17:45:03 发布

是张鱼小丸子鸭

最新推荐文章于 2023-08-24 17:45:03 发布

阅读量581

点赞数 1

分类专栏： Javascript 文章标签： javascript 前端开发语言

张鱼小丸子

本文链接：https://blog.csdn.net/qq_60976312/article/details/126487066

版权

该博客详细介绍了如何使用原生JavaScript实现购物车功能，包括添加商品、页面跳转、全选反选、数量增减、删除及总价计算等核心操作。在shop.html和car.html两个页面中，数据通过本地存储进行传递和渲染，实现了前端的基本购物车逻辑。

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

案例要求：

点击添加商品弹出对话框，添加成功渲染到页面
页面实现删除商品，添加购物车跳转到购物车页面
商品存在数量增加，商品不存在就添加商品
购物车页面实现全选反选，删除，总计，价格排序，选中删除效果

添加商品页面 shop.html


<style>
    #int {
        display: none;
    }
</style>

<body>
    <div id="box">
        <button id="addshop">添加商品</button>
        <div id="int">
            <input type="text" placeholder="输入商品" id="name"><br />
            <input type="text" placeholder="输入价格" id="price"><br />
            <button id="addok">添加</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>全选<input type="checkbox" id="all"></th>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</body>
<script>
    let btn = document.getElementById('addshop')
    let int = document.getElementById('int')
    let name = document.getElementById('name')
    let price = document.getElementById('price')
    let addok = document.getElementById('addok')
    let tbody = document.querySelector("tbody")
    // 定义一个空数组
    let arr = []
    // 添加商品弹出对话框
    btn.onclick = () => {
        int.style.display = 'block'
    }
    // 添加商品按钮
    addok.onclick = () => {
        if (name.value != "" && price.value != "") {
            let obj = {
                name: name.value,
                price: price.value,
                num:1,
                isCheck:false,