js实现简易购物车功能

下面详细讲解如何通过JS实现简易购物车功能：

1. 功能介绍

一个简单的购物车功能需要实现以下基本功能：

• 能添加/删除商品到购物车
• 能显示购物车列表及各商品的信息（如商品名称、封面、价格等）
• 能统计计算出购物车列表中所有商品的总价值

针对这些功能，我们需要通过JS来实现相应的代码处理。

2. 实现步骤

在实现购物车代码前，需要先明确数据结构和界面设计。我们需要定义一个商品对象，对象包含商品名称、价格、id等属性，定义一个购物车对象，对象包含商品列表，总价等属性。在界面上我们需要添加“加入购物车”和“移除”按钮，及购物车列表的展示界面。

2.1 商品对象的定义

let product = {
    id: 1,
    name: "商品名称",
    price: 99.99,
    cover: "商品封面图片地址",
}

2.2 购物车对象的定义

let cart = {
    products: [],  //商品列表
    totalPrice: 0,  //总价
}

2.3 添加商品到购物车

需要监听“加入购物车”按钮点击事件，将商品对象存入购物车对象的商品列表中，并更新购物车总价。

let addButton = document.getElementById('addButton')
addButton.addEventListener('click', function() {
    let product = //获取商品对象
    cart.products.push(product)
    cart.totalPrice += product.price
})

2.4 从购物车中删除商品

需要监听购物车列表项右侧的“删除”按钮点击事件，从购物车对象的商品列表中删除相应的商品对象，并更新购物车总价。

let removeButton = document.getElementById('removeButton')
removeButton.addEventListener('click', function() {
    let product = //获取被删除的商品对象
    let index = cart.products.findIndex(p => p.id === product.id)  //查找商品索引
    cart.products.splice(index, 1)  //删除商品
    cart.totalPrice -= product.price  //更新总价
})

2.5 展示购物车列表及商品信息

需要在界面上显示购物车列表及各商品的信息（如商品名称、封面、价格等），可以通过JS生成HTML代码，并将代码插入到页面中。

let cartList = document.getElementById('cartList')
cartList.innerHTML = ""
cart.products.forEach(function(product) {
    let item = `
        <div class="cart-item">
            <img src="${product.cover}" alt="${product.name}">
            <p>${product.name}</p>
            <span>￥${product.price}</span>
            <button class="remove-button">删除</button>
        </div>
    `
    cartList.innerHTML += item
})

2.6 统计购物车列表中所有商品的总价值

需要遍历购物车对象的商品列表，统计出所有商品的总价值。

let totalSpan = document.getElementById('totalSpan')
let total = 0
cart.products.forEach(function(product) {
    total += product.price
})
cart.totalPrice = total
totalSpan.innerHTML = cart.totalPrice

3. 示例说明

下面是两个简单的示例说明：

3.1 示例一

需求：添加商品到购物车，并统计出购物车中所有商品的总价值。

let product = {
    id: 1,
    name: "商品一",
    price: 99.99,
    cover: "https://xxx.com/cover1.png",
}

let cart = {
    products: [],
    totalPrice: 0,
}

//添加商品到购物车
cart.products.push(product)
cart.totalPrice += product.price

//计算购物车中所有商品的总价值
let total = 0
cart.products.forEach(function(product) {
    total += product.price
})
cart.totalPrice = total
console.log("购物车总价值为：" + cart.totalPrice)

3.2 示例二

需求：展示购物车中所有商品的信息，并能从购物车中删除某个商品。

<div id="cartList">
    <!-- 购物车列表项，通过JS插入内容 -->
</div>

let cart = {
    products: [
        {
            id: 1,
            name: "商品一",
            price: 99.99,
            cover: "https://xxx.com/cover1.png",
        },
        {
            id: 2,
            name: "商品二",
            price: 199.99,
            cover: "https://xxx.com/cover2.png",
        },
    ],
    totalPrice: 0,
}

//展示购物车列表及商品信息
let cartList = document.getElementById('cartList')
cartList.innerHTML = ""
cart.products.forEach(function(product) {
    let item = `
        <div class="cart-item">
            <img src="${product.cover}" alt="${product.name}">
            <p>${product.name}</p>
            <span>￥${product.price}</span>
            <button class="remove-button">删除</button>
        </div>
    `
    cartList.innerHTML += item
})

//监听购物车列表项右侧的“删除”按钮点击事件
let removeButtons = document.getElementsByClassName('remove-button')
for (let i = 0; i < removeButtons.length; i++) {
    removeButtons[i].addEventListener('click', function() {
        let index = i
        cart.products.splice(index, 1)
        //更新购物车展示界面及总价
        //...
    })
}

以上就是JS实现简易购物车功能的完整攻略，希望对你有所帮助。