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实现了以下功能：

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

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