js购物车加减计算总价
时间: 2023-11-30 18:03:12 浏览: 55
你可以使用 JavaScript 来实现购物车加减计算总价的功能。首先,你需要为每个商品创建一个输入框用于输入数量,并为每个商品的加减按钮绑定事件,实现数量的增减。然后,在每次增减事件触发时,你可以更新对应商品的数量,并重新计算总价。
以下是一个简单的示例代码:
HTML:
```html
<div>
<label>商品A:</label>
<button onclick="decreaseQuantity('A')">-</button>
<input type="text" id="quantityA" value="0">
<button onclick="increaseQuantity('A')">+</button>
</div>
<div>
<label>商品B:</label>
<button onclick="decreaseQuantity('B')">-</button>
<input type="text" id="quantityB" value="0">
<button onclick="increaseQuantity('B')">+</button>
</div>
<p>总价:<span id="totalPrice">0</span></p>
```
JavaScript:
```javascript
// 初始化商品数量和总价
var quantities = {
A: 0,
B: 0
};
var prices = {
A: 10,
B: 20
};
var total = 0;
// 减少商品数量
function decreaseQuantity(product) {
if (quantities[product] > 0) {
quantities[product]--;
updateTotal();
}
}
// 增加商品数量
function increaseQuantity(product) {
quantities[product]++;
updateTotal();
}
// 更新总价
function updateTotal() {
total = 0;
for (var product in quantities) {
total += quantities[product] * prices[product];
}
document.getElementById('totalPrice').textContent = total;
}
```
在这个示例中,我们使用一个 `quantities` 对象来存储每个商品的数量,使用一个 `prices` 对象来存储每个商品的价格。通过点击按钮时调用相应的函数来增减数量,并在每次更新数量时重新计算总价,并更新页面显示。