帮我用js写一个点餐系统
时间: 2024-03-23 15:39:22 浏览: 12
好的,以下是一个简单的点餐系统的JS代码示例:
```javascript
// 定义菜单列表
const menuList = [
{ name: '红烧肉', price: 32 },
{ name: '宫保鸡丁', price: 28 },
{ name: '清蒸鲈鱼', price: 58 },
{ name: '糖醋排骨', price: 36 },
{ name: '蒸蛋', price: 12 },
{ name: '炒青菜', price: 16 }
];
// 定义购物车列表
let cartList = [];
// 获取菜单列表的 DOM 元素
const menu = document.getElementById('menu');
// 获取购物车列表的 DOM 元素
const cart = document.getElementById('cart');
// 获取结算按钮的 DOM 元素
const checkoutBtn = document.getElementById('checkout-btn');
// 循环遍历菜单列表,并添加到 DOM 中
for (let i = 0; i < menuList.length; i++) {
const menuItem = document.createElement('li');
menuItem.textContent = `${menuList[i].name} - ${menuList[i].price}元`;
// 给每个菜品添加点击事件,将其添加到购物车列表中
menuItem.addEventListener('click', () => {
cartList.push(menuList[i]);
renderCartList();
});
menu.appendChild(menuItem);
}
// 渲染购物车列表
function renderCartList() {
// 清空购物车列表的 DOM 元素
cart.innerHTML = '';
// 计算购物车总价
let totalPrice = 0;
for (let i = 0; i < cartList.length; i++) {
const cartItem = document.createElement('li');
cartItem.textContent = `${cartList[i].name} - ${cartList[i].price}元`;
cart.appendChild(cartItem);
totalPrice += cartList[i].price;
}
// 添加购物车总价到 DOM 元素中
const totalItem = document.createElement('li');
totalItem.textContent = `总价:${totalPrice}元`;
cart.appendChild(totalItem);
}
// 点击结算按钮,清空购物车列表
checkoutBtn.addEventListener('click', () => {
cartList = [];
renderCartList();
});
```
在上述代码中,我们首先定义了菜单列表 `menuList` 和购物车列表 `cartList`,并获取到了菜单列表、购物车列表和结算按钮的 DOM 元素。然后使用循环遍历菜单列表,并将每个菜品的名称和价格添加到 DOM 元素中。在每个菜品的 DOM 元素上添加了点击事件,当用户点击菜品时,将其添加到购物车列表中,并调用 `renderCartList()` 方法渲染购物车列表。
在 `renderCartList()` 方法中,我们首先清空了购物车列表的 DOM 元素,然后循环遍历购物车列表,并将每个菜品的名称和价格添加到 DOM 元素中,同时计算购物车总价,并将其添加到 DOM 元素中。
最后,在结算按钮上添加了点击事件,当用户点击结算按钮时,清空购物车列表,并调用 `renderCartList()` 方法重新渲染购物车列表。
这只是一个简单的示例,你可以根据自己的需要进行修改和完善,比如加入菜品数量、删除菜品、优惠券等功能。