写一个拥有购物车功能的html,通过按钮实现商品的添加,删除,改变数量
时间: 2024-03-25 13:41:19 浏览: 22
以下是一个简单的HTML代码示例,用于实现购物车功能:
```
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
</head>
<body>
<h1>我的购物车</h1>
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>数量</th>
<th>总价</th>
<th>操作</th>
</tr>
<tr>
<td>商品 1</td>
<td>$10</td>
<td><input type="number" id="item-1-quantity" value="1"></td>
<td id="item-1-total">$10</td>
<td><button onclick="removeItem(1)">删除</button></td>
</tr>
<tr>
<td>商品 2</td>
<td>$20</td>
<td><input type="number" id="item-2-quantity" value="1"></td>
<td id="item-2-total">$20</td>
<td><button onclick="removeItem(2)">删除</button></td>
</tr>
<tr>
<td>商品 3</td>
<td>$30</td>
<td><input type="number" id="item-3-quantity" value="1"></td>
<td id="item-3-total">$30</td>
<td><button onclick="removeItem(3)">删除</button></td>
</tr>
<tr>
<td colspan="3"></td>
<td id="cart-total">$60</td>
<td></td>
</tr>
</table>
<button onclick="clearCart()">清空购物车</button>
<script>
function updateTotal() {
var item1Total = parseInt(document.getElementById("item-1-quantity").value) * 10;
var item2Total = parseInt(document.getElementById("item-2-quantity").value) * 20;
var item3Total = parseInt(document.getElementById("item-3-quantity").value) * 30;
var cartTotal = item1Total + item2Total + item3Total;
document.getElementById("item-1-total").innerHTML = "$" + item1Total;
document.getElementById("item-2-total").innerHTML = "$" + item2Total;
document.getElementById("item-3-total").innerHTML = "$" + item3Total;
document.getElementById("cart-total").innerHTML = "$" + cartTotal;
}
function removeItem(itemId) {
document.getElementById("item-" + itemId + "-quantity").value = 1;
updateTotal();
}
function clearCart() {
document.getElementById("item-1-quantity").value = 1;
document.getElementById("item-2-quantity").value = 1;
document.getElementById("item-3-quantity").value = 1;
updateTotal();
}
document.addEventListener("DOMContentLoaded", function(event) {
updateTotal();
});
document.getElementById("item-1-quantity").addEventListener("change", function(event) {
updateTotal();
});
document.getElementById("item-2-quantity").addEventListener("change", function(event) {
updateTotal();
});
document.getElementById("item-3-quantity").addEventListener("change", function(event) {
updateTotal();
});
</script>
</body>
</html>
```
该代码包括一个简单的表格,其中包括商品名称,商品价格,数量,总价和操作的列。用户可以更改数量和删除商品,然后通过 JavaScript 更新总价。用户也可以单击“清空购物车”按钮以删除所有商品。