这是一个简单的购物车功能的前端实现代码。页面上包括两个商品、商品价格、数量以及增加和减少数量的按钮。在底部还有一个统计总价的区域。
在JavaScript中，首先通过document.getElementsByClassName()获取增加和减少按钮的DOM元素，然后使用for循环为它们添加点击事件。每次点击增加按钮时，会从相应的DOM元素中获取商品价格和数量，并计算新的价格总和。在计算出总价后，更新HTML页面上的总价显示。
点击减少按钮时，也会从相应的DOM元素中获取商品价格和数量。如果数量大于1，则减少数量并计算新的价格总和。在总价计算完成后更新HTML页面上的总价显示。
这个购物车功能虽然简单，但它提供了一个良好的基础，可以扩展到更复杂的购物车应用程序，以满足不同的需求。
首先是HTML部分：
<body>
<div class="cart-item">
<span class="item-name">商品A</span>
<span class="item-price">10 元</span>
<span class="quantity">1</span>
<button class="increment-btn">+</button>
<button class="decrement-btn">-</button>
</div>
<div class="cart-item">
<span class="item-name">商品B</span>
<span class="item-price">15 元</span>
<span class="quantity">1</span>
<button class="increment-btn">+</button>
<button class="decrement-btn">-</button>
</div>
<hr>
<div class="cart-summary">
<span class="summary-label">总价：</span>
<span id="total-price">0 元</span>
</div>
</body>
这段代码是一个简单的购物车页面的HTML代码。其中包括两个商品，商品名称、价格、数量和增加减少数量的按钮。在底部是一个用于显示总价的区域。
HTML代码没有使用任何特定的框架或库，而是使用了基本的HTML元素和CSS样式来构建基本的购物车布局。商品名称、价格和数量的元素都使用了span标签，而增加和减少数量的按钮则使用button标签。在总价区域，span元素用于显示标签和价格的文本。
这个HTML页面提供了一个良好的界面，可以通过JavaScript代码将其转化为一个交互式购物车应用程序。
css效果可根据喜好来自行更改
最后JavaScript效果：
<script>
let incrementBtns = document.getElementsByClassName('increment-btn');
let decrementBtns = document.getElementsByClassName('decrement-btn');
let totalPrice = document.getElementById('total-price');
// 初始化总价
let priceSum = 0;
// 为增加按钮添加点击事件
for (let i = 0; i < incrementBtns.length; i++) {
incrementBtns[i].addEventListener('click', function() {
let item = this.parentElement;
let price = parseFloat(item.querySelector('.item-price').textContent);
let quantity = parseInt(item.querySelector('.quantity').textContent);
quantity += 1;
item.querySelector('.quantity').textContent = quantity;
priceSum += price;
totalPrice.textContent = priceSum.toFixed(2) + " 元";
});
}
// 为减少按钮添加点击事件
for (let i = 0; i < decrementBtns.length; i++) {
decrementBtns[i].addEventListener('click', function() {
let item = this.parentElement;
let price = parseFloat(item.querySelector('.item-price').textContent);
let quantity = parseInt(item.querySelector('.quantity').textContent);
if (quantity > 1) {
quantity -= 1;
item.querySelector('.quantity').textContent = quantity;
priceSum -= price;
totalPrice.textContent = priceSum.toFixed(2) + " 元";
}
});
}
</script>
这段代码是JavaScript代码，用于将购物车HTML页面转化为交互式购物车应用程序。
首先，使用了querySelector()方法获取增加数量和减少数量按钮的DOM元素，并为它们添加相关的事件监听器。当用户单击增加按钮时，相应的商品数量会增加，并计算总价格。当用户单击减少按钮时，相应的商品数量会减少，并更新总价格。
在代码中定义了一个变量priceSum，用于存储所有商品的总价格。在单击增加按钮时，从相应商品元素中获取价格，将其添加到priceSum中，并更新显示的总价。在单击减少按钮时，从相应商品元素中获取价格，从priceSum中减去，并更新显示的总价。在更新总价时，使用了toFixed()方法来使价格保留两位小数点。
这些代码使用的是基本的JavaScript语法和DOM API，没有使用任何外部库或框架。
最后总代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>加减按钮关联总量</title>
</head>
<body>
<div class="cart-item">
<span class="item-name">商品A</span>
<span class="item-price">10 元</span>
<span class="quantity">0</span>
<button class="increment-btn">+</button>
<button class="decrement-btn">-</button>
</div>
<div class="cart-item">
<span class="item-name">商品B</span>
<span class="item-price">15 元</span>
<span class="quantity">0</span>
<button class="increment-btn">+</button>
<button class="decrement-btn">-</button>
</div>
<hr>
<div class="cart-summary">
<span class="summary-label">总价：</span>
<span id="total-price">0 元</span>
</div>
</body>
<script>
let incrementBtns = document.getElementsByClassName('increment-btn');
let decrementBtns = document.getElementsByClassName('decrement-btn');
let totalPrice = document.getElementById('total-price');
// 初始化总价
let priceSum = 0;
// 为增加按钮添加点击事件
for (let i = 0; i < incrementBtns.length; i++) {
incrementBtns[i].addEventListener('click', function() {
let item = this.parentElement;
let price = parseFloat(item.querySelector('.item-price').textContent);
let quantity = parseInt(item.querySelector('.quantity').textContent);
quantity += 1;
item.querySelector('.quantity').textContent = quantity;
priceSum += price;
totalPrice.textContent = priceSum.toFixed(2) + " 元";
});
}
// 为减少按钮添加点击事件
for (let i = 0; i < decrementBtns.length; i++) {
decrementBtns[i].addEventListener('click', function() {
let item = this.parentElement;
let price = parseFloat(item.querySelector('.item-price').textContent);
let quantity = parseInt(item.querySelector('.quantity').textContent);
if (quantity > 0) {
quantity -= 1;
item.querySelector('.quantity').textContent = quantity;
priceSum -= price;
totalPrice.textContent = priceSum.toFixed(2) + " 元";
}else{
alert("没有东西了");
}
});
}
</script>
</html>
这段代码是一个基本的HTML页面，包括两个购物车商品和一个购物车总价格的元素。还包括一个JavaScript脚本，用于实现购物车的交互功能。
在HTML部分，每个购物车项目包括商品名称、商品价格、商品数量和增加/减少按钮。总价元素显示购物车中所有商品的总价格。
在JavaScript部分，首先获取增加按钮和减少按钮的DOM元素，并为它们添加相应的事件监听器。当用户单击增加按钮时，相应的商品数量会增加，并计算总价格。当用户单击减少按钮时，相应的商品数量会减少，并更新总价格。
及效果图：
加价格效果：
减效果
在代码中定义了一个变量priceSum，用于存储所有商品的总价格。在单击增加按钮时，从相应商品元素中获取价格，将其添加到priceSum中，并更新显示的总价。在单击减少按钮时，从相应商品元素中获取价格，从priceSum中减去，并更新显示的总价。在更新总价时，使用了toFixed()方法来使价格保留两位小数点。
这些代码使用的是基本的JavaScript语法和DOM API，没有使用任何外部库或框架。
谢谢大家观看；大佬勿喷；
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
