以下是一个简单的 HTML 点餐页面代码,包含菜品展示、数量选择和总价计算功能:从而实现菜品名称和相应的点击菜品的数量计算出菜品总价的这么一个工功能。
主要功能说明:
1. 菜品展示:
- 包含 3 道示例菜品(可自行添加/修改)
- 每个菜品包含名称、价格和数量选择框
- data-price 属性存储菜品单价(供 JavaScript 读取)
2. 交互功能:
- 数量选择框( type="number" )限制最小值为 0
- 点击“提交订单”按钮触发总价计算
- 实时显示总价,并弹出确认对话框
3. 样式美化:
- 简单 CSS 布局( inline-block 排列菜品)
- 按钮带颜色和交互效果
- 价格用红色突出显示
使用方法:
1. 将代码保存为 .html 文件(如 order.html )
2. 用浏览器打开文件
3. 修改数量后点击“提交订单”查看总价
从而实现菜品名称和相应的点击菜品的数量计算出菜品总价的这么一个工功能。