利用html制作一个可以加购商品的购物车的页面

在HTML中创建一个简单的购物车功能页面，通常会涉及到表格、按钮以及一些基本的CSS样式。以下是一个基础的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>简易购物车</title> <style> .cart { border: 1px solid #ccc; padding: 10px; display: flex; justify-content: space-between; } .item { margin-bottom: 10px; } </style> </head> <body> <h1>购物车</h1> <div class="cart"> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>操作</th> </tr> </thead> <tbody>  <tr id="product1" class="item"> <td>商品1</td> <td>￥50</td> <td><input type="number" value="1"></td> <td><button onclick="addToCart('product1')">加入购物车</button></td> </tr>  </tbody> </table> <p>总价：<span id="totalPrice">0</span>元</p> </div> <script> function addToCart(itemId) { let item = document.getElementById(itemId); let quantity = parseInt(item.getElementsByTagName('input')[0].value); let price = parseFloat(item.getElementsByTagName('td')[1].textContent.replace(￥, '')); // 假设￥字符已移除 let totalPriceElement = document.getElementById('totalPrice'); let totalPrice = totalPriceElement.textContent; totalPrice = (parseFloat(totalPrice) + (quantity * price)).toFixed(2); // 确保总价四舍五入到两位小数 totalPriceElement.textContent = totalPrice; // 可在此处添加数据库或服务器交互来更新实际购物车状态，这里仅做本地模拟 console.log(`已将 ${quantity} 件 ${itemId} 加入购物车，总价 ${totalPrice} 元`); } </script> </body> </html> ``` 在这个示例中，我们使用了HTML `<table>`来显示商品列表，每个商品行都有一个数量输入框和一个“加入购物车”按钮。当用户点击按钮时，`addToCart`函数会被触发，它会更新总价并模拟购物车的操作。

阅读全文

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通