点餐界面代码表现

点餐界面的代码表现可以有很多种不同的实现方式，具体的表现形式会因为不同的开发语言、框架和应用场景而有所不同。以下是一个简单的示例，可以帮助你初步了解点餐界面的代码实现：

HTML 代码：

<div class="menu">
  <h2>菜单</h2>
  <ul>
    <li data-id="1" data-price="10">炒饭</li>
    <li data-id="2" data-price="15">炒面</li>
    <li data-id="3" data-price="20">烤鸭</li>
    <li data-id="4" data-price="25">鱼香肉丝</li>
  </ul>
</div>

<div class="cart">
  <h2>购物车</h2>
  <ul></ul>
  <p>总价：<span class="total-price">0</span>元</p>
</div>

JavaScript 代码：

const menu = document.querySelector('.menu');
const cart = document.querySelector('.cart');
const cartList = cart.querySelector('ul');
const totalPrice = cart.querySelector('.total-price');

menu.addEventListener('click', e => {
  if (e.target.tagName === 'LI') {
    const id = e.target.dataset.id;
    const price = e.target.dataset.price;
    const name = e.target.textContent;
    const li = document.createElement('li');
    li.textContent = `${name} - ${price}元`;
    cartList.appendChild(li);
    totalPrice.textContent = parseInt(totalPrice.textContent) + parseInt(price);
  }
});

这段代码实现了一个简单的点餐界面，包含菜单和购物车两个区域。当用户点击菜单中的某个菜品时，该菜品会被添加到购物车中，并且总价会实时更新。这个示例使用了 HTML、CSS 和 JavaScript 进行开发，实现了一个基本的点餐界面的交互功能。