JavaScript编写一个简易购物车功能

实现一个简易购物车功能，需要以下步骤：

第一步：创建HTML页面

创建一个HTML页面，用于展示商品列表、购物车内容和总价。

<!DOCTYPE html>
<html>
  <head>
    <title>购物车</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>商品列表</h1>
    <ul id="item-list">
      <li>
        <span>商品A</span>
        <button class="add-to-cart" data-price="50">加入购物车</button>
      </li>
      <li>
        <span>商品B</span>
        <button class="add-to-cart" data-price="100">加入购物车</button>
      </li>
    </ul>
    <h1>购物车</h1>
    <ul id="cart-list"></ul>
    <p>总价：<span id="total-price">0</span>元</p>
    <script src="app.js"></script>
  </body>
</html>

第二步：编写JavaScript代码

在HTML页面中添加一个JavaScript文件的引用，并在该文件中实现购物车的逻辑。

首先，为加入购物车的按钮添加事件监听器，当按钮被点击时，将商品信息添加到购物车中。

const cart = [];

document.querySelectorAll('.add-to-cart').forEach(button => {
  button.addEventListener('click', event => {
    const price = Number(event.target.dataset.price);
    const item = {
      name: event.target.previousElementSibling.textContent,
      price: price
    };
    cart.push(item);
    renderCart();
  });
});

接着，实现购物车的渲染逻辑，将购物车中的商品展示出来，并计算总价。

function renderCart() {
  const cartListElement = document.getElementById('cart-list');
  const totalPriceElement = document.getElementById('total-price');
  cartListElement.innerHTML = '';
  let totalPrice = 0;
  cart.forEach(item => {
    const li = document.createElement('li');
    li.textContent = `${item.name}: ${item.price}元`;
    cartListElement.appendChild(li);
    totalPrice += item.price;
  });
  totalPriceElement.textContent = totalPrice;
}

示例说明1

假设我们要加入一件名为“商品C”的商品，价格为80元，那么在页面上添加如下代码：

<li>
  <span>商品C</span>
  <button class="add-to-cart" data-price="80">加入购物车</button>
</li>

这样，在用户点击“加入购物车”按钮时，该商品就会被添加到购物车中，并在购物车列表中展示。

示例说明2

假设用户希望删除购物车中的某个商品，我们可以为每个购物车项添加“删除”按钮，并在JavaScript代码中实现点击事件的处理函数。

cartListElement.addEventListener('click', event => {
  if (event.target.classList.contains('remove')) {
    const index = event.target.dataset.index;
    cart.splice(index, 1);
    renderCart();
  }
});

当用户点击“删除”按钮时，该商品将会从购物车中删除，并重新计算总价。同时，在购物车列表中也将该商品对应的项删除。

<li>
  商品C: 80元
  <button class="remove" data-index="0">删除</button>
</li>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript编写一个简易购物车功能 - Python技术站

JavaScript编写一个简易购物车功能

第一步：创建HTML页面

第二步：编写JavaScript代码

示例说明1

示例说明2

相关文章