用js实现一个购物车系统

作为AI助手，我可以提供一份JavaScript代码示例，但是，需要明确的是，这个购物车系统要求比较丰富，需要考虑到用户添加商品、删除商品、清空购物车、计算总价、结算等功能。下面是一个简单的购物车系统实现：

HTML部分：

<div id="cart">
  <h3>购物车</h3>
  <ul id="cart-items"></ul>
  <p>总价：<span id="total-price">0</span>元</p>
  <button id="clear-cart">清空购物车</button>
  <button id="checkout">结算</button>
</div>

<div id="products">
  <h3>商品列表</h3>
  <ul id="product-list">
    <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>

JavaScript部分：

// 获取元素
const cart = document.getElementById('cart');
const cartItems = document.getElementById('cart-items');
const totalPrice = document.getElementById('total-price');
const clearCartBtn = document.getElementById('clear-cart');
const checkoutBtn = document.getElementById('checkout');
const productList = document.getElementById('product-list');

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

// 添加商品到购物车
function addToCart(id, price) {
  // 判断购物车中是否已经有该商品
  const itemIndex = cartData.findIndex(item => item.id === id);
  if (itemIndex === -1) {
    cartData.push({
      id,
      price,
      quantity: 1
    });
  } else {
    cartData[itemIndex].quantity++;
  }
  updateCart();
}

// 从购物车中删除商品
function removeFromCart(id) {
  const itemIndex = cartData.findIndex(item => item.id === id);
  if (itemIndex !== -1) {
    cartData.splice(itemIndex, 1);
  }
  updateCart();
}

// 清空购物车
function clearCart() {
  cartData = [];
  updateCart();
}

// 更新购物车
function updateCart() {
  cartItems.innerHTML = '';
  let total = 0;
  cartData.forEach(item => {
    const li = document.createElement('li');
    li.innerText = `商品${item.id} × ${item.quantity} - ${item.price * item.quantity}元`;
    const removeBtn = document.createElement('button');
    removeBtn.innerText = '删除';
    removeBtn.addEventListener('click', () => removeFromCart(item.id));
    li.appendChild(removeBtn);
    cartItems.appendChild(li);
    total += item.price * item.quantity;
  });
  totalPrice.innerText = total;
}

// 绑定添加到购物车按钮事件
const addBtns = document.querySelectorAll('.add-to-cart');
addBtns.forEach(btn => {
  const parent = btn.parentNode;
  const id = parent.getAttribute('data-id');
  const price = parent.getAttribute('data-price');
  btn.addEventListener('click', () => addToCart(id, price));
});

// 绑定清空购物车按钮事件
clearCartBtn.addEventListener('click', clearCart);

// 绑定结算按钮事件
checkoutBtn.addEventListener('click', () => alert(`结算：${totalPrice.innerText}元`));

这段代码实现了一个简单的购物车系统，包括了添加商品、删除商品、清空购物车、计算总价、结算等功能。但是，这个系统还有很多可以优化的地方，比如可以添加商品数量输入框、商品图片、商品名称等信息，可以使用localStorage等技术实现数据持久化等等。