以下是一个简单的实现淘宝购物车的示例代码：
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 函数将购物车数据渲染到页面中。请注意，此示例只是一个简单的实现，还有很多细节和功能可以进行优化和扩展。
