js实现简单的购物车有图有代码

让我来为大家详细讲解一下如何用js实现简单的购物车吧。

1. 确定数据结构

在开始实现购物车之前，我们需要先确定其数据结构。在此，我们可以采用一个数组来储存购物车中的商品信息，其中每个元素都是一个对象，包含商品的相关信息：名称、价格、数量等，示例代码如下：

let cart = [
  { name: "商品1", price: 10, quantity: 1 },
  { name: "商品2", price: 20, quantity: 2 },
  { name: "商品3", price: 30, quantity: 1 }
];

2. 从页面中获取商品信息

为了将商品添加到购物车中，我们需要先从页面中获取其相关信息，包括商品名称、价格和数量等。可以通过事件监听器实现这一过程，例如点击“添加到购物车”按钮时获取相应商品信息，示例代码如下：

const addBtn = document.querySelector(".add-to-cart");
addBtn.addEventListener("click", function(e) {
  e.preventDefault();
  const name = document.querySelector(".product-name").textContent;
  const price = document.querySelector(".product-price").textContent;
  const quantity = document.querySelector(".product-quantity").value;
  addToCart(name, price, quantity);
});

3. 实现添加到购物车的函数

在从页面中获取商品信息后，我们需要将其添加到购物车之中。实现这一过程的函数可称之为addToCart，功能是接收商品相关信息，生成一个对象，并将其添加到购物车数组中。示例代码如下：

function addToCart(name, price, quantity) {
  for (let i = 0; i < cart.length; i++) {
    if (cart[i].name === name) {
      cart[i].quantity += parseInt(quantity);
      saveCart();
      return;
    }
  }
  const item = { name, price, quantity: parseInt(quantity) };
  cart.push(item);
  saveCart();
}

在这个函数中，我们首先遍历购物车数组来查找是否有与目标商品同名的商品，如果有，则增加数量；否则，生成一个新的商品对象并添加到购物车数组中。

4. 显示购物车中的商品信息

为了向用户展现购物车中的商品信息，我们需要实现一个展示购物车列表的函数，可以逐个遍历购物车数组并动态地生成HTML代码。示例代码如下：

function displayCart() {
  const cartList = document.querySelector(".cart-list");
  cartList.innerHTML = "";
  for (let i = 0; i < cart.length; i++) {
    let itemHTML = `<li class="cart-item">
                      <div class="cart-item-info">
                        <span class="cart-item-name">${cart[i].name}</span>
                        <span class="cart-item-price">$${cart[i].price}</span>
                        <span class="cart-item-quantity">${cart[i].quantity}</span>
                        <span class="cart-item-total">$${cart[i].price * cart[i].quantity}</span>
                      </div>
                      <button class="cart-item-remove" data-name="${cart[i].name}">Remove</button>
                    </li>`;
    cartList.innerHTML += itemHTML;
  }
}

5. 保存购物车信息并将其恢复

为了实现持久化存储，我们需要将购物车信息保存在本地存储中，方便用户刷新页面或关闭浏览器后继续使用。保存购物车信息的函数如下：

function saveCart() {
  localStorage.setItem("cart", JSON.stringify(cart));
}

为了在用户再次打开页面时恢复购物车信息，我们需要编写一个从本地存储中读取购物车信息的函数，并在页面加载时调用它，示例代码如下：

window.addEventListener('load', function() {
  const savedCart = JSON.parse(localStorage.getItem('cart'));
  if (savedCart) {
    cart = savedCart;
    displayCart();
  }
});

示例1：添加商品到购物车

以下是HTML页面中添加商品到购物车的代码：

<h2 class="product-name">商品1</h2>
<p class="product-price>10</p>
<input class="product-quantity" type="number" value="1">
<button class="add-to-cart">Add to Cart</button>

这段代码展示了一个商品名称、价格和数量以及一个“添加到购物车”按钮。在用户点击这个按钮时，通过事件监听器从页面中获取商品信息，然后调用addToCart函数将其添加到购物车中。

示例2：删除购物车中的商品

以下是从购物车中删除单个商品的代码：

const cartList = document.querySelector(".cart-list");
cartList.addEventListener("click", function(e) {
  const target = e.target;
  if (target.classList.contains("cart-item-remove")) {
    const name = target.getAttribute("data-name");
    removeFromCart(name);
    displayCart();
  }
});

function removeFromCart(name) {
  for (let i = 0; i < cart.length; i++) {
    if (cart[i].name === name) {
      cart.splice(i, 1);
      saveCart();
      return;
    }
  }
}

这段代码展示了当用户点击一个“Remove”按钮时，将调用从购物车中删除单个商品的removeFromCart函数并更新购物车列表。在这个函数中，我们首先遍历购物车数组找到需要删除的商品对象，然后使用splice方法将其从购物车数组中删除。最后调用saveCart函数保存购物车信息。

总的来说，实现一个简单的购物车需要考虑很多方面，涉及到数据结构、页面交互、本地存储等多个方面，希望这篇攻略能给大家带来一些帮助。