这段代码是一个简单的购物车程序,包括以下功能:
1. 点击购物车按钮会显示/隐藏购物车商品列表;
2. 点击加号按钮可以增加对应商品的数量和购物车的总价;
3. 点击减号按钮可以减少对应商品的数量和购物车的总价。
其中,页面上的每个商品都有一个唯一的 ID(item-1、item-2),商品名称、价格、数量和加减号按钮的元素都可以通过查询对应的 class 或者父元素的子元素来获取。购物车的总价则在一个单独的 div 元素中显示。
JavaScript 部分代码使用了循环来为每个加减号按钮添加点击事件监听器,实现了对应商品数量和购物车总价的计算。
首先HTML部分:
<div>
<h2>购物车</h2>
<button id="cart-button">购物车</button>
<div id="cart-content" style="display: none;">
<div id="item-1" class="cart-item">
<span class="item-name">商品A</span>
<span class="item-price">10 元</span>
<div>
<button class="decrease-button">-</button>
<span class="quantity">0</span>
<button class="increase-button">+</button>
</div>
</div>
<div id="item-2" class="cart-item">
<span class="item-name">商品B</span>
<span class="item-price">15 元</span>
<div>
<button class="decrease-button">-</button>
<span class="quantity">0</span>
<button class="increase-button">+</button>
</div>
</div>
</div>
<div id="total">总价:0 元</div>
</div>
该代码是一个简单的购物车页面,其中包含:
1. 购物车按钮(id="cart-button")和购物车商品内容(id="cart-content");
2. 商品A(id="item-1")和商品B(id="item-2"),均包含商品名称(class="item-name")、商品价格(class="item-price")、增加数量按钮(class="increase-button")、数量(class="quantity")以及减少数量按钮(class="decrease-button");
3. 总价(id="total")。
购物车页面的显示状态是通过 CSS 样式中的 display 属性针对购物车商品内容设置的,display:none 表示不显示该元素,display:block 表示显示该元素。
购物车商品内容中的数量(class="quantity")和总价(id="total")可能会随着用户增加或减少商品数量而发生变化,因此需要使用 JavaScript 动态改变页面内容。
<script>
let cartButton = document.getElementById('cart-button');
let cartContent = document.getElementById('cart-content');
let increaseButtons = document.getElementsByClassName('increase-button');
let decreaseButtons = document.getElementsByClassName('decrease-button');
let quantities = document.getElementsByClassName('quantity');
let totalElement = document.getElementById('total');
let totalPrice = 0;
// 点击购物车按钮后显示购物车商品内容
cartButton.addEventListener('click', function() {
if (cartContent.style.display === 'none') {
cartContent.style.display = 'block';
} else {
cartContent.style.display = 'none';
}
});
// 点击加号增加商品数量和总价
for (let i = 0; i < increaseButtons.length; i++) {
increaseButtons[i].addEventListener('click', function() {
let quantityElement = this.parentNode.querySelector('.quantity');
let itemPriceElement = this.parentNode.parentNode.querySelector('.item-price');
let itemPrice = parseInt(itemPriceElement.innerText);
let quantity = parseInt(quantityElement.innerText);
quantity += 1;
quantityElement.innerText = quantity;
totalPrice += itemPrice;
totalElement.innerText = '总价:' + totalPrice + ' 元';
});
}
// 点击减号减少商品数量和总价
for (let i = 0; i < decreaseButtons.length; i++) {
decreaseButtons[i].addEventListener('click', function() {
let quantityElement = this.parentNode.querySelector('.quantity');
let itemPriceElement = this.parentNode.parentNode.querySelector('.item-price');
let itemPrice = parseInt(itemPriceElement.innerText);
let quantity = parseInt(quantityElement.innerText);
if (quantity > 0) {
quantity -= 1;
quantityElement.innerText = quantity;
totalPrice -= itemPrice;
totalElement.innerText = '总价:' + totalPrice + ' 元';
}
});
}
</script>
补充一下:
该代码主要使用了 JavaScript DOM 操作,通过获取页面中的元素然后对这些元素添加事件监听器,实现了购物车的基本功能。其中,主要使用了以下 DOM 操作函数/方法:
1. getElementById():用于获取指定 ID 的元素;
2. getElementsByClassName():用于获取指定 class 名称的所有元素;
3. querySelector():用于获取指定 CSS 选择器匹配的第一个元素;
4. addEventListener():用于为指定事件添加事件监听器。
这些 DOM 操作函数/方法可以帮助我们快速地获取页面上的元素或者节点,并在页面上添加/修改/删除这些元素或者节点,实现交互效果。同时,该代码还使用了变量、数组、条件语句等基本 JavaScript 语法。
效果图原图:
点击出现商品图:
点击商品加图:
点击商品减图:
与加作对比;
最后谢谢大家的观看
大佬勿扰;勿喷;