用js实现购物车功能代码

好的，以下是一个简单的用 JavaScript 实现购物车功能的示例代码：

HTML:

<div id="item-list">
  <h3>商品列表</h3>
  <ul>
    <li data-id="1" data-name="商品1" data-price="10">商品1 - 10元</li>
    <li data-id="2" data-name="商品2" data-price="20">商品2 - 20元</li>
    <li data-id="3" data-name="商品3" data-price="30">商品3 - 30元</li>
  </ul>
</div>

<div id="cart">
  <h3>购物车</h3>
  <ul id="cart-items"></ul>
  <p id="total-price">总价：0元</p>
</div>

JavaScript:

// 获取商品列表和购物车元素
const itemList = document.getElementById('item-list');
const cart = document.getElementById('cart');
const cartItems = document.getElementById('cart-items');
const totalPrice = document.getElementById('total-price');

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

// 监听商品列表的点击事件
itemList.addEventListener('click', e => {
  // 获取点击的商品元素
  const item = e.target.closest('li');
  if (!item) return;

  // 获取商品的 id、名称和价格
  const id = item.dataset.id;
  const name = item.dataset.name;
  const price = +item.dataset.price;

  // 查找购物车中是否已经存在该商品
  const cartItem = cartData.find(item => item.id === id);

  if (cartItem) {
    // 如果购物车中已经存在该商品，则增加数量
    cartItem.quantity++;
    cartItem.price += price;
    cartItems.querySelector(`li[data-id="${id}"]`).textContent = `${name} x ${cartItem.quantity} - ${cartItem.price}元`;
  } else {
    // 如果购物车中不存在该商品，则添加到购物车
    const newCartItem = {
      id,
      name,
      price,
      quantity: 1,
    };
    cartData.push(newCartItem);
    const newCartItemElement = document.createElement('li');
    newCartItemElement.dataset.id = id;
    newCartItemElement.textContent = `${name} x 1 - ${price}元`;
    cartItems.appendChild(newCartItemElement);
  }

  // 更新总价
  const cartTotalPrice = cartData.reduce((total, item) => total + item.price, 0);
  totalPrice.textContent = `总价：${cartTotalPrice}元`;
});

以上代码实现了一个简单的购物车功能，用户可以点击商品列表中的商品添加到购物车中，购物车中显示添加的商品名称、数量和价格，总价也会实时更新。