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

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