购物车计算总结（分功能）（如侵权就删）

最新推荐文章于 2024-06-28 11:52:57 发布

IKUNzhenin

最新推荐文章于 2024-06-28 11:52:57 发布

阅读量217

点赞数

分类专栏： js中的功能的特性文章标签：前端 javascript html

本文链接：https://blog.csdn.net/IKUNzhenin/article/details/133199665

版权

js中的功能的特性专栏收录该内容

63 篇文章 0 订阅

订阅专栏

这是一个简单的购物车页面，包含两个购物项，每个购物项包括商品名称、商品价格、数量、增加和减少按钮。页面下方的总价会实时计算购物项中商品的总价。

JavaScript代码中，首先获取了增加和减少按钮以及总价元素的DOM对象。然后定义了一个变量priceSum用于记录商品的总价。为增加按钮和减少按钮添加了点击事件监听器，当点击增加按钮时，使用querySelector()方法获取到商品名称、商品价格和数量的DOM元素，从中分别获取商品价格和数量的值，数量加1，商品总价加上商品单价，更新总价元素的文本。当点击减少按钮时，同样也获取到商品名称、商品价格和数量的DOM元素，判断商品数量是否大于1，是则数量减1，商品总价减去商品单价，更新总价元素的文本。最后使用toFixed()方法保留两位小数，并将总价和“元”拼接起来显示。

HTML部分：

这是一个简单的购物车页面，包含两个购物项，每个购物项包括商品名称、商品价格、数量、增加和减少按钮。页面下方的总价会实时计算购物项中商品的总价。具体来说：

- 每个商品项包括三个元素：商品名称（使用span元素包裹）、商品价格（使用span元素包裹）、数量（使用span元素包裹）以及增加按钮（使用button元素）、减少按钮（使用button元素）；
- 页面下方的总价元素包括两个元素：总价的标签文字（使用span元素包裹）以及显示总价的元素（使用span元素，并添加了一个id属性，方便JavaScript代码获取）；
- 所有元素都使用class属性来进行样式控制。

       // 为减少按钮添加点击事件
       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) + " 元";
       }
       });
       }
   </script>

这段JavaScript代码实现了购物车的核心功能，包括两个部分：

1. 初始化总价

首先，使用JavaScript获取增加按钮、减少按钮和总价元素的引用，然后初始化总价的变量值为0。

2. 为增加和减少按钮添加点击事件

使用for循环遍历所有的增加按钮和减少按钮，并为它们分别添加点击事件。

增加按钮点击事件处理函数的逻辑如下：

- 获取当前购物项的元素；
- 通过元素的querySelector方法获取商品价格元素和数量元素的引用，并分别获取它们的值；
- 将数量加1，并将结果更新到数量元素；
- 将商品价格累加到总价变量中；
- 将总价更新到总价元素上。

减少按钮点击事件处理函数的逻辑如下：

- 获取当前购物项的元素；
- 通过元素的querySelector方法获取商品价格元素和数量元素的引用，并分别获取它们的值；
- 如果数量大于0，则将数量减1，并将结果更新到数量元素；
- 将商品价格从总价变量中减去；
- 将总价更新到总价元素上。

最后，调用toFixed方法将总价的小数位数保留两位。

最后总代码：

<!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) + " 元";
       }
       });
       }
   </script>
</html>