编写JavaScript程序实现简易购物车
时间: 2024-02-08 07:16:03 浏览: 87
用JavaScript实现简易购物车
好的,以下是一个简单的JavaScript程序实现简易购物车的示例:
```javascript
// 初始化商品列表
const products = [
{ id: 1, name: '商品1', price: 100 },
{ id: 2, name: '商品2', price: 200 },
{ id: 3, name: '商品3', price: 300 },
{ id: 4, name: '商品4', price: 400 },
]
// 初始化购物车
let cart = []
// 添加商品到购物车
function addToCart(id) {
const product = products.find(p => p.id === parseInt(id))
if (product) {
cart.push(product)
console.log(`已添加商品 ${product.name} 到购物车`)
} else {
console.log('商品不存在')
}
}
// 从购物车中移除商品
function removeFromCart(id) {
const index = cart.findIndex(p => p.id === parseInt(id))
if (index !== -1) {
const product = cart.splice(index, 1)[0]
console.log(`已从购物车中移除商品 ${product.name}`)
} else {
console.log('购物车中不存在该商品')
}
}
// 计算购物车总价
function getTotalPrice() {
return cart.reduce((total, product) => total + product.price, 0)
}
// 打印购物车商品列表和总价
function printCart() {
console.log('购物车商品列表:')
cart.forEach(product => console.log(`- ${product.name}(${product.price}元)`))
console.log(`总价:${getTotalPrice()}元`)
}
// 测试
addToCart(1)
addToCart(2)
addToCart(3)
removeFromCart(2)
printCart()
```
在这个示例中,我们首先定义了一个商品列表和一个购物车数组,然后实现了三个操作函数:
- `addToCart(id)`:将指定id的商品添加到购物车中;
- `removeFromCart(id)`:从购物车中移除指定id的商品;
- `getTotalPrice()`:计算购物车中所有商品的总价。
最后,我们调用了这些函数来测试程序的功能。
阅读全文