购物车计算总价及点击出现商品（如侵权就删）

这段代码是一个简单的购物车程序，包括以下功能：

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 语法。

效果图原图：

点击出现商品图：

点击商品加图：

点击商品减图：

与加作对比；

最后谢谢大家的观看

大佬勿扰；勿喷；