用JS写一个淘宝购物车
时间: 2023-12-29 10:18:47 浏览: 77
好的,以下是一个简单的淘宝购物车示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝购物车</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>淘宝购物车</h1>
</header>
<main>
<ul id="cart-items">
<!-- 这里用JavaScript动态添加购物车商品列表 -->
</ul>
<div id="cart-summary">
<p>总价:<span id="cart-total-price">0</span>元</p>
<button id="checkout-btn">去结算</button>
</div>
</main>
<footer>
<p>版权所有 © 2021 淘宝</p>
</footer>
<script src="cart.js"></script>
</body>
</html>
```
CSS代码:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #FF4400;
color: #FFF;
padding: 20px;
}
header h1 {
margin: 0;
}
main {
padding: 20px;
}
#cart-items {
list-style: none;
padding: 0;
}
#cart-items li {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #EEE;
}
#cart-items li img {
max-width: 80px;
margin-right: 10px;
}
#cart-items li p {
margin: 0;
}
#cart-summary {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-top: 20px;
}
#cart-summary p {
margin: 0;
}
#cart-summary #cart-total-price {
font-weight: bold;
font-size: 20px;
color: #FF4400;
margin-right: 5px;
}
#checkout-btn {
background-color: #FF4400;
color: #FFF;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
margin-top: 20px;
cursor: pointer;
}
footer {
background-color: #EEE;
padding: 10px;
text-align: center;
}
```
JavaScript代码:
```javascript
// 商品数据
const items = [
{
name: 'iPhone 12',
price: 6799,
image: 'https://img.alicdn.com/bao/uploaded/i3/2911207232/O1CN01MVD9Bz1wUv9wL6w7Q_!!0-item_pic.jpg',
},
{
name: 'AirPods Pro',
price: 1899,
image: 'https://img.alicdn.com/bao/uploaded/i4/2205751132/O1CN01eK7VQe2N3yM0IqC0I_!!0-item_pic.jpg',
},
{
name: 'MacBook Pro',
price: 11499,
image: 'https://img.alicdn.com/bao/uploaded/i4/2205751132/O1CN01uPdmUH2N3yM2L2C09_!!0-item_pic.jpg',
},
];
// 初始化购物车
let cart = [];
// 获取DOM元素
const cartItems = document.getElementById('cart-items');
const cartTotalPrice = document.getElementById('cart-total-price');
const checkoutBtn = document.getElementById('checkout-btn');
// 渲染购物车商品列表
function renderCart() {
// 清空购物车商品列表
cartItems.innerHTML = '';
// 遍历购物车数组,生成DOM元素并添加到购物车商品列表中
cart.forEach(item => {
const li = document.createElement('li');
li.innerHTML = `
<img src="${item.image}">
<p>${item.name}</p>
<p>${item.price}元</p>
<button class="remove-btn">删除</button>
`;
cartItems.appendChild(li);
// 绑定删除按钮的点击事件
const removeBtn = li.querySelector('.remove-btn');
removeBtn.addEventListener('click', () => removeItem(item));
});
// 计算购物车商品总价并更新DOM元素
const totalPrice = cart.reduce((acc, item) => acc + item.price, 0);
cartTotalPrice.textContent = totalPrice;
}
// 添加商品到购物车
function addItem(item) {
cart.push(item);
renderCart();
}
// 从购物车中删除商品
function removeItem(item) {
const index = cart.indexOf(item);
if (index !== -1) {
cart.splice(index, 1);
renderCart();
}
}
// 绑定结算按钮的点击事件
checkoutBtn.addEventListener('click', () => {
if (cart.length > 0) {
alert('结算成功!');
cart = [];
renderCart();
} else {
alert('购物车为空!');
}
});
// 初始化页面
items.forEach(item => {
const addButton = document.createElement('button');
addButton.textContent = '加入购物车';
addButton.addEventListener('click', () => addItem(item));
const li = document.createElement('li');
li.innerHTML = `
<img src="${item.image}">
<p>${item.name}</p>
<p>${item.price}元</p>
`;
li.appendChild(addButton);
document.getElementById('item-list').appendChild(li);
});
```
以上代码实现了以下功能:
1. 在页面中显示商品列表,并为每个商品添加一个“加入购物车”按钮。
2. 点击“加入购物车”按钮将商品添加到购物车中,并在页面中显示购物车商品列表。
3. 购物车中的商品可以被删除。
4. 点击“去结算”按钮将购物车中的商品清空,并提示“结算成功”或“购物车为空”的信息。
注意:以上代码仅为示例,没有连接真正的淘宝购物车系统。在实际开发中,需要根据淘宝购物车系统的API接口进行开发。