原生html+js+css添加购物车效果

这篇文章距离上次修改已过447天，其中的内容可能已经有所变动。

要在原生HTML、JS和CSS中添加购物车效果，你可以创建一个简单的购物车界面，并且使用JavaScript来处理添加商品到购物车的逻辑。以下是一个简单的例子：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart Example</title>
<style>
  .cart { border: 1px solid #eee; width: 300px; margin: 20px; padding: 10px; }
  .cart-item { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
  .cart-item-remove { cursor: pointer; }
</style>
</head>
<body>
 
<h1>Product List</h1>
 
<div class="product" data-price="99" data-name="Product 1">
  <button class="add-to-cart">Add to Cart</button>
  Product 1 - $99
</div>
 
<div class="product" data-price="199" data-name="Product 2">
  <button class="add-to-cart">Add to Cart</button>
  Product 2 - $199
</div>
 
<div class="cart">
  <h2>Shopping Cart</h2>
  <div class="cart-items"></div>
</div>
 
<script>
  let cartItems = document.querySelector('.cart-items');
 
  // Event listener for adding to cart
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.add-to-cart').forEach(button => {
      button.addEventListener('click', event => {
        let product = event.target.parentNode;
        addToCart(product);
      });
    });
  });
 
  // Function to add product to cart
  function addToCart(product) {
    let price = product.dataset.price;
    let name = product.dataset.name;
 
    // Create cart item element
    let cartItem = document.createElement('div');
    cartItem.classList.add('cart-item');
    cartItem.innerHTML = `<span>${name} - $${price}</span> <button class="cart-item-remove" data-name="${name}">Remove</button>`;
 
    // Event listener for removing from cart
    cartItem.querySelector('.cart-item-remove').addEventListener('click', function() {
      removeFromCart(this.dataset.name);
    });
 
    // Add cart item to cart
    cartItems.appendChild(cartItem);
  }
 
  // Function to remove product from cart
  function removeFromCart(name) {
    cartItems.querySelectorAll('.cart-item').forEach(item => {
      if(item.textContent.includes(name)) {
        cartItems.removeChild(item);
      }
    });
  }
</script>
 
</body>
</html>

这个例子中，我们有一个产品列表，每个产品都有一个"Add to Cart"按钮。当按钮被点击时，产品信息会被添加到购物车中，显示在页面底部的<div class="cart-items"></div>区域。每个购物车中的条目都有一个"Remove"按钮，点击后会将该产品从购物车中移除。这个例子使用了HTML5的data-*属性来存储产品的价格和名称，这些数据可以

原生html+js+css添加购物车效果

评论已关闭

推荐阅读