帮我用js做一个购物车,要求有商品图片
时间: 2024-03-24 17:40:04 浏览: 14
好的,下面是一个简单的购物车示例,包含商品图片和基本的购物车功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>购物车</title>
<style type="text/css">
.item {
display: inline-block;
margin: 10px;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.item img {
max-width: 100px;
max-height: 100px;
}
.cart {
border: 1px solid #ccc;
padding: 10px;
margin-top: 20px;
}
.cart h2 {
margin-top: 0;
}
.cart .item {
margin: 5px 0;
}
.cart .item img {
max-width: 50px;
max-height: 50px;
}
.cart .item .quantity {
display: inline-block;
width: 30px;
text-align: center;
}
.cart .item .remove {
display: inline-block;
margin-left: 10px;
color: #f00;
cursor: pointer;
}
</style>
</head>
<body>
<div class="items">
<div class="item">
<img src="https://via.placeholder.com/150">
<p>商品1</p>
<p>价格:100元</p>
<button class="add-to-cart" data-name="商品1" data-price="100">加入购物车</button>
</div>
<div class="item">
<img src="https://via.placeholder.com/150">
<p>商品2</p>
<p>价格:200元</p>
<button class="add-to-cart" data-name="商品2" data-price="200">加入购物车</button>
</div>
</div>
<div class="cart">
<h2>购物车</h2>
<div class="cart-items"></div>
<p>总价:<span class="total-price">0</span>元</p>
</div>
<script type="text/javascript">
// 获取DOM元素
const items = document.querySelector('.items');
const cartItems = document.querySelector('.cart-items');
const total = document.querySelector('.total-price');
// 初始化购物车信息
let cart = {};
if (localStorage.getItem('cart')) {
cart = JSON.parse(localStorage.getItem('cart'));
renderCart();
}
// 绑定加入购物车按钮事件
items.addEventListener('click', function(event) {
if (event.target.classList.contains('add-to-cart')) {
const name = event.target.dataset.name;
const price = event.target.dataset.price;
addToCart(name, price);
}
});
// 添加商品到购物车
function addToCart(name, price) {
if (cart[name]) {
cart[name].quantity++;
} else {
cart[name] = {
quantity: 1,
price: price
};
}
localStorage.setItem('cart', JSON.stringify(cart));
renderCart();
}
// 渲染购物车
function renderCart() {
cartItems.innerHTML = '';
let totalPrice = 0;
for (const name in cart) {
const item = cart[name];
const cartItem = document.createElement('div');
cartItem.className = 'item';
cartItem.innerHTML = `
<img src="https://via.placeholder.com/150">
<p>${name}</p>
<p>单价:${item.price}元</p>
<div class="quantity">${item.quantity}</div>
<div class="remove" data-name="${name}">X</div>
`;
cartItems.appendChild(cartItem);
totalPrice += item.price * item.quantity;
}
total.innerText = totalPrice;
}
// 绑定删除按钮事件
cartItems.addEventListener('click', function(event) {
if (event.target.classList.contains('remove')) {
const name = event.target.dataset.name;
delete cart[name];
localStorage.setItem('cart', JSON.stringify(cart));
renderCart();
}
});
</script>
</body>
</html>
```
这个示例中,我们通过HTML和CSS定义了商品和购物车的样式,使用了一个包含两个商品的商品列表。我们使用了一个名为`addToCart`的函数来将商品添加到购物车中,每个商品都有一个`加入购物车`的按钮,点击该按钮会将商品添加到购物车中。我们使用了一个`cart`对象来存储购物车的内容,每个商品都以商品名称作为键值,存储了商品的数量和价格信息。我们还使用了`localStorage`来在本地存储购物车的内容,以便在页面刷新后仍然能够保留购物车的内容。
当商品被添加到购物车中时,我们会通过`renderCart`函数渲染购物车的内容。这个函数会遍历购物车中的所有商品,创建一个包含商品信息的DOM元素,并将它们添加到购物车中。我们还会计算购物车中所有商品的总价,并将它显示在页面上。
购物车中的每个商品都有一个删除按钮,我们通过`delete`操作符从购物车中删除商品,并重新渲染购物车的内容。
注意:这个示例仅为演示目的,实际的购物车可能需要更多的功能和更复杂的逻辑。