JS如何实现简单加减购物车效果

发布时间：2021-08-19 11:16:13 作者：chen
来源：亿速云阅读：120

# JS如何实现简单加减购物车效果

## 前言

在电商网站和各类需要商品管理的系统中，购物车功能是核心交互之一。本文将详细介绍如何使用原生JavaScript实现一个基础的加减购物车功能，涵盖HTML结构搭建、CSS样式设计以及核心JS逻辑实现。

---

## 一、HTML基础结构搭建

首先创建一个基本的HTML框架，包含商品列表和购物车展示区域：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简易购物车</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- 商品列表 -->
        <div class="product-list">
            <div class="product-item" data-id="1">
                <h3>商品A</h3>
                <p>价格: ¥<span class="price">29.9</span></p>
                <div class="quantity-control">
                    <button class="decrease">-</button>
                    <span class="quantity">0</span>
                    <button class="increase">+</button>
                </div>
            </div>
            <!-- 更多商品... -->
        </div>
        
        <!-- 购物车汇总 -->
        <div class="cart-summary">
            <h2>购物车</h2>
            <ul class="cart-items"></ul>
            <div class="total">
                总计: ¥<span class="total-price">0.00</span>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

二、CSS样式设计

添加基础样式增强用户体验（部分关键样式）：

/* style.css */
.quantity-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quantity-control button {
    width: 30px;
    height: 30px;
    border: none;
    background: #f0f0f0;
    cursor: pointer;
    font-size: 16px;
}

.quantity-control button:hover {
    background: #ddd;
}

.cart-items {
    list-style: none;
    padding: 0;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

三、JavaScript核心逻辑实现

1. 初始化DOM元素和变量

// script.js
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有商品项
    const productItems = document.querySelectorAll('.product-item');
    const cartItemsList = document.querySelector('.cart-items');
    const totalPriceElement = document.querySelector('.total-price');
    
    // 购物车数据
    let cart = [];
    
    // 初始化事件监听
    initEventListeners();
});

2. 实现加减按钮功能

function initEventListeners() {
    document.querySelectorAll('.increase').forEach(button => {
        button.addEventListener('click', function() {
            const productItem = this.closest('.product-item');
            updateQuantity(productItem, 1);
        });
    });
    
    document.querySelectorAll('.decrease').forEach(button => {
        button.addEventListener('click', function() {
            const productItem = this.closest('.product-item');
            updateQuantity(productItem, -1);
        });
    });
}

function updateQuantity(productItem, change) {
    const quantityElement = productItem.querySelector('.quantity');
    let quantity = parseInt(quantityElement.textContent);
    
    // 确保数量不小于0
    quantity = Math.max(0, quantity + change);
    quantityElement.textContent = quantity;
    
    // 更新购物车数据
    updateCart(productItem, quantity);
}

3. 购物车数据管理

function updateCart(productItem, newQuantity) {
    const productId = productItem.dataset.id;
    const productName = productItem.querySelector('h3').textContent;
    const productPrice = parseFloat(productItem.querySelector('.price').textContent);
    
    // 查找购物车中是否已有该商品
    const existingItemIndex = cart.findIndex(item => item.id === productId);
    
    if (newQuantity > 0) {
        if (existingItemIndex >= 0) {
            // 更新已有商品数量
            cart[existingItemIndex].quantity = newQuantity;
        } else {
            // 添加新商品
            cart.push({
                id: productId,
                name: productName,
                price: productPrice,
                quantity: newQuantity
            });
        }
    } else {
        // 数量为0时从购物车移除
        if (existingItemIndex >= 0) {
            cart.splice(existingItemIndex, 1);
        }
    }
    
    // 重新渲染购物车
    renderCart();
}

4. 购物车渲染与计算总价

function renderCart() {
    const cartItemsList = document.querySelector('.cart-items');
    const totalPriceElement = document.querySelector('.total-price');
    
    // 清空当前列表
    cartItemsList.innerHTML = '';
    
    let totalPrice = 0;
    
    // 渲染每个购物车商品
    cart.forEach(item => {
        const li = document.createElement('li');
        li.className = 'cart-item';
        li.innerHTML = `
            <span>${item.name} × ${item.quantity}</span>
            <span>¥${(item.price * item.quantity).toFixed(2)}</span>
        `;
        cartItemsList.appendChild(li);
        
        totalPrice += item.price * item.quantity;
    });
    
    // 更新总价
    totalPriceElement.textContent = totalPrice.toFixed(2);
}

四、功能扩展建议

本地存储：使用localStorage保存购物车状态

// 保存购物车
function saveCart() {
    localStorage.setItem('cart', JSON.stringify(cart));
}

// 读取购物车
function loadCart() {
    const savedCart = localStorage.getItem('cart');
    if (savedCart) {
        cart = JSON.parse(savedCart);
        renderCart();
        // 同步更新商品数量显示
        updateQuantityDisplays();
    }
}

动画效果：添加数量变化时的过渡动画

.quantity {
    transition: all 0.3s ease;
    display: inline-block;
}

.quantity.changed {
    transform: scale(1.2);
    color: #f60;
}

批量操作：增加全选/批量删除功能

五、完整代码示例

查看完整示例代码（示例链接）

结语

通过本文的实现，我们完成了一个具备以下功能的购物车： - 商品数量的增减控制 - 实时计算总金额 - 购物车商品列表动态更新 - 基础的数据验证

这为后续添加更复杂功能（如优惠券计算、库存校验等）打下了良好基础。实际开发中建议结合框架（如Vue/React）进行组件化开发，但理解原生JS实现原理至关重要。 “`

（注：实际文章约为1900字，此处为精简后的核心内容展示，完整版包含更多实现细节、错误处理说明和代码注释）