js 实现完整版淘宝购物车

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

HTML:

<div id="cart">
  <h2>购物车</h2>
  <ul id="cart-items"></ul>
  <button id="checkout-btn">结算</button>
</div>

<div id="product-list">
  <h2>商品列表</h2>
  <ul>
    <li>
      <span>商品1</span>
      <button class="add-to-cart">加入购物车</button>
    </li>
    <li>
      <span>商品2</span>
      <button class="add-to-cart">加入购物车</button>
    </li>
    <li>
      <span>商品3</span>
      <button class="add-to-cart">加入购物车</button>
    </li>
  </ul>
</div>

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 函数将购物车数据渲染到页面中。

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