当前位置：首页 > JavaScript

js实现购物车的功能

2026-04-04 08:37:04JavaScript

实现购物车功能的基本结构

购物车功能通常包括商品添加、删除、数量调整、计算总价等核心功能。以下是一个基于JavaScript的实现方案。

购物车数据结构

使用数组存储购物车中的商品，每个商品对象包含id、name、price和quantity等属性。

let cart = [];

添加商品到购物车

检查商品是否已存在，存在则增加数量，否则添加新商品。

function addToCart(product) {
  const existingProduct = cart.find(item => item.id === product.id);
  if (existingProduct) {
    existingProduct.quantity += 1;
  } else {
    cart.push({ ...product, quantity: 1 });
  }
  updateCart();
}

从购物车移除商品

根据商品ID移除对应商品。

function removeFromCart(productId) {
  cart = cart.filter(item => item.id !== productId);
  updateCart();
}

调整商品数量

根据商品ID更新对应商品的数量。

function updateQuantity(productId, newQuantity) {
  const product = cart.find(item => item.id === productId);
  if (product) {
    product.quantity = newQuantity;
    if (product.quantity <= 0) {
      removeFromCart(productId);
    }
  }
  updateCart();
}

计算购物车总价

遍历购物车中的商品，计算总价。

function calculateTotal() {
  return cart.reduce((total, item) => total + (item.price * item.quantity), 0);
}

更新购物车显示

将购物车数据渲染到页面，通常使用DOM操作或前端框架。

function updateCart() {
  const cartElement = document.getElementById('cart');
  cartElement.innerHTML = '';
  cart.forEach(item => {
    const itemElement = document.createElement('div');
    itemElement.innerHTML = `
      <span>${item.name}</span>
      <span>${item.price}</span>
      <span>${item.quantity}</span>
      <button onclick="updateQuantity(${item.id}, ${item.quantity - 1})">-</button>
      <button onclick="updateQuantity(${item.id}, ${item.quantity + 1})">+</button>
      <button onclick="removeFromCart(${item.id})">Remove</button>
    `;
    cartElement.appendChild(itemElement);
  });
  document.getElementById('total').textContent = calculateTotal();
}

示例商品数据

const products = [
  { id: 1, name: 'Product 1', price: 10 },
  { id: 2, name: 'Product 2', price: 20 },
  { id: 3, name: 'Product 3', price: 30 }
];

初始化购物车

页面加载时初始化购物车。

js实现购物车的功能

document.addEventListener('DOMContentLoaded', () => {
  updateCart();
});

完整示例

<!DOCTYPE html>
<html>
<head>
  <title>Shopping Cart</title>
</head>
<body>
  <h1>Products</h1>
  <div id="products">
    <div>
      <span>Product 1 - $10</span>
      <button onclick="addToCart(products[0])">Add to Cart</button>
    </div>
    <div>
      <span>Product 2 - $20</span>
      <button onclick="addToCart(products[1])">Add to Cart</button>
    </div>
    <div>
      <span>Product 3 - $30</span>
      <button onclick="addToCart(products[2])">Add to Cart</button>
    </div>
  </div>
  <h1>Cart</h1>
  <div id="cart"></div>
  <h2>Total: $<span id="total">0</span></h2>
  <script src="cart.js"></script>
</body>
</html>