行业资讯

javascript如何实现购物车效果

发布时间：2021-09-10 11:35:51 作者：柒染
来源：亿速云 阅读：182 
# JavaScript如何实现购物车效果

## 目录
1. [购物车功能概述](#购物车功能概述)
2. [基础HTML结构搭建](#基础html结构搭建)
3. [CSS样式设计](#css样式设计)
4. [JavaScript核心功能实现](#javascript核心功能实现)
   - [4.1 商品数据管理](#41-商品数据管理)
   - [4.2 添加商品功能](#42-添加商品功能)
   - [4.3 删除商品功能](#43-删除商品功能)
   - [4.4 数量修改功能](#44-数量修改功能)
   - [4.5 价格计算功能](#45-价格计算功能)
   - [4.6 本地存储实现](#46-本地存储实现)
5. [高级功能扩展](#高级功能扩展)
   - [5.1 优惠券系统](#51-优惠券系统)
   - [5.2 商品规格选择](#52-商品规格选择)
   - [5.3 购物车动画效果](#53-购物车动画效果)
6. [性能优化建议](#性能优化建议)
7. [完整代码示例](#完整代码示例)
8. [总结与展望](#总结与展望)

## 购物车功能概述

电子商务网站中，购物车是最核心的模块之一。一个完整的购物车系统需要实现以下基本功能：

1. **商品展示**：清晰展示商品图片、名称、价格等信息
2. **添加商品**：支持将商品加入购物车
3. **删除商品**：可从购物车移除不需要的商品
4. **数量修改**：允许用户调整购买数量
5. **价格计算**：实时计算商品总价、优惠和应付金额
6. **数据持久化**：保存用户操作记录，防止页面刷新丢失数据

本文将详细介绍如何使用原生JavaScript实现这些功能，并逐步扩展更高级的特性。

## 基础HTML结构搭建

首先构建购物车页面的基本HTML框架：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript购物车实现</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <!-- 商品列表区域 -->
        <section class="product-list">
            <h2>商品列表</h2>
            <div class="products" id="productContainer">
                <!-- 商品项将通过JS动态生成 -->
            </div>
        </section>
        
        <!-- 购物车区域 -->
        <section class="shopping-cart">
            <h2>购物车 (<span id="cartCount">0</span>)</h2>
            <div class="cart-items" id="cartContainer">
                <!-- 购物车商品项将通过JS动态生成 -->
            </div>
            <div class="cart-summary">
                <div class="summary-row">
                    <span>商品总数:</span>
                    <span id="totalQuantity">0</span>
                </div>
                <div class="summary-row">
                    <span>商品总价:</span>
                    <span id="totalPrice">¥0.00</span>
                </div>
                <div class="summary-row discount">
                    <span>优惠金额:</span>
                    <span id="discountAmount">¥0.00</span>
                </div>
                <div class="summary-row total">
                    <span>应付总额:</span>
                    <span id="payableAmount">¥0.00</span>
                </div>
                <button class="checkout-btn" id="checkoutBtn">去结算</button>
            </div>
        </section>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

CSS样式设计

为购物车添加基础样式（styles.css）：

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

body {
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

/* 商品列表样式 */
.product-list h2, 
.shopping-cart h2 {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.product-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.product-info {
    padding: 15px;
}

.product-title {
    font-size: 16px;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-price {
    color: #e53935;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 12px;
}

.add-to-cart {
    width: 100%;
    padding: 8px 0;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.add-to-cart:hover {
    background: #388E3C;
}

/* 购物车样式 */
.cart-items {
    margin-bottom: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.cart-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: white;
    border-radius: 6px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.cart-item-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 15px;
}

.cart-item-info {
    flex: 1;
}

.cart-item-title {
    font-size: 14px;
    margin-bottom: 5px;
}

.cart-item-price {
    color: #e53935;
    font-size: 14px;
}

.cart-item-actions {
    display: flex;
    align-items: center;
}

.quantity-control {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.quantity-btn {
    width: 25px;
    height: 25px;
    background: #f0f0f0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-input {
    width: 40px;
    height: 25px;
    text-align: center;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.remove-item {
    color: #757575;
    cursor: pointer;
    font-size: 20px;
}

.remove-item:hover {
    color: #e53935;
}

/* 购物车汇总 */
.cart-summary {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 15px;
}

.summary-row.total {
    font-size: 18px;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.discount {
    color: #4CAF50;
}

.checkout-btn {
    width: 100%;
    padding: 12px 0;
    background: #FF5722;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 15px;
}

.checkout-btn:hover {
    background: #E64A19;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
}

JavaScript核心功能实现

4.1 商品数据管理

首先定义商品数据结构和状态管理：

// 商品数据
const products = [
    {
        id: 1,
        name: 'Apple iPhone 13',
        price: 5999,
        image: 'https://example.com/iphone13.jpg',
        stock: 50
    },
    {
        id: 2,
        name: 'Samsung Galaxy S22',
        price: 5699,
        image: 'https://example.com/s22.jpg',
        stock: 30
    },
    {
        id: 3,
        name: 'Xiaomi 12 Pro',
        price: 4699,
        image: 'https://example.com/mi12pro.jpg',
        stock: 40
    },
    {
        id: 4,
        name: 'Huawei P50 Pro',
        price: 5488,
        image: 'https://example.com/p50pro.jpg',
        stock: 25
    }
];

// 购物车状态
let cart = {
    items: [], // 商品项数组
    total: 0,  // 总价
    quantity: 0 // 总数量
};

// DOM元素
const productContainer = document.getElementById('productContainer');
const cartContainer = document.getElementById('cartContainer');
const cartCount = document.getElementById('cartCount');
const totalQuantity = document.getElementById('totalQuantity');
const totalPrice = document.getElementById('totalPrice');
const discountAmount = document.getElementById('discountAmount');
const payableAmount = document.getElementById('payableAmount');
const checkoutBtn = document.getElementById('checkoutBtn');

4.2 添加商品功能

实现将商品添加到购物车的功能：

// 渲染商品列表
function renderProducts() {
    productContainer.innerHTML = '';
    products.forEach(product => {
        const productElement = document.createElement('div');
        productElement.className = 'product-card';
        productElement.innerHTML = `
            <img src="${product.image}" alt="${product.name}" class="product-image">
            <div class="product-info">
                <h3 class="product-title">${product.name}</h3>
                <div class="product-price">¥${product.price.toFixed(2)}</div>
                <button class="add-to-cart" data-id="${product.id}">加入购物车</button>
            </div>
        `;
        productContainer.appendChild(productElement);
    });

    // 添加事件监听
    document.querySelectorAll('.add-to-cart').forEach(button => {
        button.addEventListener('click', addToCart);
    });
}

// 添加商品到购物车
function addToCart(e) {
    const productId = parseInt(e.target.dataset.id);
    const product = products.find(p => p.id === productId);
    
    if (!product) return;
    
    // 检查购物车是否已有该商品
    const existingItem = cart.items.find(item => item.id === productId);
    
    if (existingItem) {
        // 已有商品，增加数量
        if (existingItem.quantity < product.stock) {
            existingItem.quantity += 1;
        } else {
            alert('库存不足');
            return;
        }
    } else {
        // 新商品，添加到购物车
        cart.items.push({
            id: product.id,
            name: product.name,
            price: product.price,
            image: product.image,
            quantity: 1,
            stock: product.stock
        });
    }
    
    // 更新购物车状态
    updateCart();
    saveCartToLocalStorage();
    
    // 添加动画效果
    animateAddToCart(e.target);
}

// 添加商品动画
function animateAddToCart(button) {
    const buttonRect = button.getBoundingClientRect();
    const cartRect = cartCount.getBoundingClientRect();
    
    const animationElement = document.createElement('div');
    animationElement.className = 'add-to-cart-animation';
    animationElement.style.cssText = `
        position: fixed;
        left: ${buttonRect.left + buttonRect.width / 2}px;
        top: ${buttonRect.top}px;
        width: 20px;
        height: 20px;
        background: #4CAF50;
        border-radius: 50%;
        pointer-events: none;
        z-index: 1000;
    `;
    
    document.body.appendChild(animationElement);
    
    const animation = animationElement.animate([
        { 
            transform: 'translate(0, 0) scale(1)',
            opacity: 1
        },
        { 
            transform: `translate(${cartRect.left - buttonRect.left - buttonRect.width / 2 + cartRect.width / 2}px, ${cartRect.top - buttonRect.top + cartRect.height / 2}px) scale(0.5)`,
            opacity: 0.5
        }
    ], {
        duration: 800,
        easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
    });
    
    animation.onfinish = () => {
        animationElement.remove();
    };
}

4.3 删除商品功能

实现从购物车移除商品的功能：

// 渲染购物车
function renderCart() {
    cartContainer.innerHTML = '';
    
    if (cart.items.length === 0) {
        cartContainer.innerHTML = '<div class="empty-cart">购物车是空的</div>';
        return;
    }
    
    cart.items.forEach(item => {
        const cartItemElement = document.createElement('div');
        cartItemElement.className = 'cart-item';
        cartItemElement.innerHTML = `
            <img src="${item.image}" alt="${item.name}" class="cart-item-image">
            <div class="cart-item-info">
                <h4 class="cart-item-title">${item.name}</h4>
                <div class="cart-item-price">¥${item.price.toFixed(2)}</div>
            </div>
            <div class="cart-item-actions">
                <div class="quantity-control">
                    <button class="quantity-btn minus" data-id="${item.id}">-</button>
                    <input type="number" class="quantity-input" value="${item.quantity}" min="1" max="${item.stock}" data-id="${item.id}">
                    <button class="quantity-btn plus" data-id="${item.id}">+</button>
                </div>
                <span class="remove-item" data-id="${item.id}">&times;</span>
            </div>
        `;
        cartContainer.appendChild(cartItemElement);
    });
    
    // 添加事件监听
    document.querySelectorAll('.remove-item').forEach(button => {
        button.addEventListener('click', removeFromCart);
    });
    
    document.querySelectorAll('.quantity-btn.minus').forEach(button => {
        button.addEventListener('click', decreaseQuantity);
    });
    
    document.querySelectorAll('.quantity-btn.plus').forEach(button => {
        button.addEventListener('click', increaseQuantity);
    });
    
    document.querySelectorAll('.quantity-input').forEach(input => {
        input.addEventListener('change', updateQuantity);
    });
}

// 从购物车移除商品
function removeFromCart(e) {
    const productId = parseInt(e.target.dataset.id);
    cart.items = cart.items.filter(item => item.id !== productId);
    updateCart();
    saveCartToLocalStorage();
}

4.4 数量修改功能

实现购物车商品数量的增减功能：

// 减少商品数量
function decreaseQuantity(e) {
    const productId = parseInt(e.target.dataset.id);
    const item = cart.items.find(item => item.id === productId);
    
    if (item && item.quantity > 1) {
        item.quantity -= 1;
        updateCart();
        saveCartToLocalStorage();
    }
}

// 增加商品数量
function increaseQuantity(e) {
    const productId = parseInt(e.target.dataset.id);
    const item = cart.items.find(item => item.id === productId);
    
    if (item && item.quantity < item.stock) {
        item.quantity += 1;
        updateCart();
        saveCartToLocalStorage();
    } else {
        alert('库存不足');
    }
}

// 直接修改数量
function updateQuantity(e) {
    const productId = parseInt(e.target.dataset.id);
    const newQuantity = parseInt(e.target.value);
    const item = cart.items.find(item => item.id === productId);
    
    if (item) {
        if (newQuantity >= 1 && newQuantity <= item.stock) {
            item.quantity = newQuantity;
            updateCart();
            saveCartToLocalStorage();
        } else {
            e.target.value = item.quantity;
            if (newQuantity > item.stock) {
                alert('库存不足');
            }
        }
    }
}

4.5 价格计算功能

实现购物车总价计算和显示：

”`javascript // 更新购物车状态 function updateCart() { // 计算总数量和总价 cart.quantity = cart.items.reduce((total, item) => total + item.quantity, 0); cart.total = cart.items.reduce((total, item) => total + (item.price * item.quantity), 0);

// 更新UI
cartCount.textContent = cart.quantity;
totalQuantity.textContent = cart.quantity;
totalPrice.textContent = `¥${cart.total.toFixed(2)}`;

// 计算优惠和应付金额（暂时没有优惠）
const discount = 0;
discountAmount.textContent = `¥${discount.toFixed(2)}`;
payableAmount.textContent = `¥${(cart.total - discount).toFixed(2
推荐阅读：
  1. javascript详解实现购物车完整功能(附效果图，完整代码)
  2. JavaScript实现拖拽效果

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

javascript

上一篇：微信公众平台开发中地图相关接口有哪些

下一篇：怎么通过重启路由的方法切换IP地址

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号