html 购物车动画效果,购物车案例(JavaScript动态效果)

好的，我可以为您提供一些 HTML 购物车动画效果和购物车案例。以下是一个简单的示例：

HTML 代码：

<div class="container">
  <div class="product">
    <h2>商品1</h2>
    <p>价格：$10</p>
    <button class="add-to-cart">加入购物车</button>
  </div>
  <div class="product">
    <h2>商品2</h2>
    <p>价格：$20</p>
    <button class="add-to-cart">加入购物车</button>
  </div>
  <div class="product">
    <h2>商品3</h2>
    <p>价格：$30</p>
    <button class="add-to-cart">加入购物车</button>
  </div>
  <div class="cart">
    <h2>购物车</h2>
    <ul></ul>
    <p class="total">总价：$0</p>
  </div>
</div>

CSS 代码：

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 50px 0;
}

.product {
  text-align: center;
  margin: 0 20px;
}

.add-to-cart {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.cart {
  text-align: center;
}

.cart ul {
  list-style-type: none;
  padding: 0;
}

.cart li {
  margin: 10px 0;
}

.total {
  font-weight: bold;
}

JavaScript 代码：

const products = document.querySelectorAll('.product');
const cart = document.querySelector('.cart ul');
const total = document.querySelector('.total');

let totalPrice = 0;

products.forEach(product => {
  const button = product.querySelector('.add-to-cart');
  button.addEventListener('click', () => {
    const name = product.querySelector('h2').textContent;
    const price = parseFloat(product.querySelector('p').textContent.slice(3));
    const item = document.createElement('li');
    item.textContent = `${name} - $${price}`;
    cart.appendChild(item);
    totalPrice += price;
    total.textContent = `总价：$${totalPrice}`;
  });
});

在这个案例中，我们创建了三个商品，每个商品都有一个“加入购物车”的按钮。当用户点击按钮时，商品名称和价格将添加到购物车列表中，并计算总价格。我们还使用了一些 CSS 样式来使其看起来更好。

希望这个案例对您有所帮助！