js 实现完整版淘宝购物车

以下是一个简单的实现淘宝购物车的示例代码：

HTML:

  
购物车
  

  结算



  
商品列表
  

    

      商品1
      加入购物车
    
    

      商品2
      加入购物车
    
    

      商品3
      加入购物车
    
  

JavaScript:

// 获取购物车和商品列表
const cart = document.getElementById('cart-items');
const productList = document.getElementById('product-list');

// 定义购物车数据
let cartItems = [];

// 加入购物车事件处理函数
function addToCart(event) {
  const product = event.target.previousElementSibling.textContent;
  const item = { name: product };
  cartItems.push(item);
  renderCart();
}

// 结算事件处理函数
function checkout() {
  // 清空购物车
  cartItems = [];
  renderCart();
  alert('结算成功！');
}

// 渲染购物车
function renderCart() {
  cart.innerHTML = '';
  cartItems.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.name;
    cart.appendChild(li);
  });
}

// 添加加入购物车按钮点击事件监听器
const addToCartButtons = document.querySelectorAll('.add-to-cart');
addToCartButtons.forEach(btn => {
  btn.addEventListener('click', addToCart);
});

// 添加结算按钮点击事件监听器
const checkoutBtn = document.getElementById('checkout-btn');
checkoutBtn.addEventListener('click', checkout);

此示例中，通过JavaScript实现了以下功能：

1. 点击“加入购物车”按钮将商品添加到购物车中。
2. 点击“结算”按钮清空购物车，并弹出结算成功的提示。
3. 使用 renderCart 函数将购物车数据渲染到页面中。

请注意，此示例只是一个简单的实现，还有很多细节和功能可以进行优化和扩展。