如何用js写一个购物车功能

以下是一个简单的购物车功能的代码，包括添加商品、删除商品、计算总价等功能：

HTML部分：

<div id="cart">
  <h2>购物车</h2>
  <ul id="cart-items"></ul>
  <p>总价：<span id="total-price">0</span>元</p>
</div>
<div id="product-list">
  <h2>商品列表</h2>
  <ul>
    <li data-id="1" data-price="100">商品1 - 100元 <button class="add-to-cart">加入购物车</button></li>
    <li data-id="2" data-price="200">商品2 - 200元 <button class="add-to-cart">加入购物车</button></li>
    <li data-id="3" data-price="300">商品3 - 300元 <button class="add-to-cart">加入购物车</button></li>
  </ul>
</div>

JS部分：

// 获取DOM元素
var cartItems = document.getElementById('cart-items');
var totalPrice = document.getElementById('total-price');
var productList = document.getElementById('product-list');

// 初始化购物车数据
var cartData = [];

// 添加商品到购物车
function addToCart(id, name, price) {
  // 查找购物车中是否已存在该商品
  var existingItem = cartData.find(function(item) {
    return item.id === id;
  });

  if (existingItem) {
    // 如果已存在，则增加数量
    existingItem.quantity += 1;
  } else {
    // 如果不存在，则添加新商品
    cartData.push({
      id: id,
      name: name,
      price: price,
      quantity: 1
    });
  }

  // 更新购物车显示
  renderCart();
}

// 从购物车中删除商品
function removeFromCart(id) {
  // 查找购物车中对应的商品
  var existingItemIndex = cartData.findIndex(function(item) {
    return item.id === id;
  });

  if (existingItemIndex !== -1) {
    // 如果存在，则删除该商品
    cartData.splice(existingItemIndex, 1);
  }

  // 更新购物车显示
  renderCart();
}

// 计算购物车总价
function calculateTotalPrice() {
  var totalPriceValue = cartData.reduce(function(total, item) {
    return total + item.price * item.quantity;
  }, 0);
  totalPrice.textContent = totalPriceValue;
}

// 渲染购物车
function renderCart() {
  // 先清空购物车显示
  cartItems.innerHTML = '';

  // 遍历购物车数据，生成HTML并添加到购物车显示中
  cartData.forEach(function(item) {
    var itemHtml = '<li>' + item.name + ' - ' + item.price + '元 x ' + item.quantity + ' <button class="remove-from-cart" data-id="' + item.id + '">删除</button></li>';
    cartItems.insertAdjacentHTML('beforeend', itemHtml);
  });

  // 计算总价并更新显示
  calculateTotalPrice();
}

// 添加商品到购物车的按钮点击事件
productList.addEventListener('click', function(event) {
  if (event.target.className === 'add-to-cart') {
    var productItem = event.target.parentElement;
    var productId = productItem.getAttribute('data-id');
    var productName = productItem.textContent.trim().split(' - ')[0];
    var productPrice = productItem.getAttribute('data-price');
    addToCart(productId, productName, productPrice);
  }
});

// 从购物车中删除商品的按钮点击事件
cartItems.addEventListener('click', function(event) {
  if (event.target.className === 'remove-from-cart') {
    var itemId = event.target.getAttribute('data-id');
    removeFromCart(itemId);
  }
});