首页用web 做一个购物车网页购物车页面：显示已选商品清单，每个商品有删除选项，总价计算功能输出这个代码

用web 做一个购物车网页购物车页面：显示已选商品清单，每个商品有删除选项，总价计算功能输出这个代码

时间: 2024-10-15 13:08:40 浏览: 20

为了给出一个基础的示例，这里是一个简单的HTML和JavaScript代码片段，用于显示购物车页面的基本结构。请注意，这只是一个静态示例，实际应用还需要配合后端服务来动态加载和管理数据。 ```html <!DOCTYPE html> <html lang="zh"> <head> <title>简单购物车</title> <style> .cart-item { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; } .delete-button { float: right; } .total { font-weight: bold; } </style> </head> <body> <h2>购物车</h2> <ul id="shopping-cart"> </ul> <div id="cart-total" class="total">总计: ￥0.00</div> <script> // 假设items是一个模拟的购物车数组 const items = [ { name: '商品1', price: 9.99, quantity: 1 }, { name: '商品2', price: 19.99, quantity: 2 }, // 更多商品... ]; function displayCart() { let total = 0; items.forEach(item => { const li = document.createElement('li'); li.textContent = `${item.name} (×${item.quantity})`; const deleteButton = document.createElement('button'); deleteButton.textContent = '删除'; deleteButton.addEventListener('click', () => removeItem(item.id)); li.appendChild(deleteButton); const itemPrice = item.price * item.quantity; total += itemPrice; li.querySelector('.price').textContent = `￥${itemPrice.toFixed(2)}`; document.getElementById('shopping-cart').appendChild(li); }); document.getElementById('cart-total').textContent = `总计: ￥${total.toFixed(2)}`; } function removeItem(itemId) { // 这里需要结合后端API来删除对应商品 // 比如调用类似 `removeFromCart(itemId)` 的函数 console.log(`删除商品 ${itemId}`); displayCart(); // 更新显示 } displayCart(); </script> </body> </html> ```

阅读全文