界面布局:
左侧:菜品管理区,包含 “添加菜品输入框 + 按钮”“菜品列表 ”“一键清空按钮”;
右侧:推荐结果区,包含 “今日推荐标题”“结果展示区 ”“抽选按钮”。
核心功能:
添加菜品:校验输入非空、非重复后 ,将菜品加入数组并渲染到列表;
添加菜品
删除菜品:通过data-index标记菜品下标,点击删除时从数组中移除并重新渲染;
删除菜品
data-index
一键清空:确认后清空菜品数组,重置列表和结果;
一键清空
随机抽选:模拟转盘转动(文字快速切换) ,最终随机选中一个菜品展示 。
随机抽选
便捷操作:输入框按回车键可快速添加菜品,提升使用体验。
把上述代码复制到文本编辑器(如记事本 、VS Code);
保存为点餐助手.html(后缀必须是.html);
点餐助手.html
.html
双击该文件,用任意浏览器打开即可使用。
请登录 或 注册购买
上一篇:韩剧盘_影视资源网_最新免费电影电视剧无
下一篇: 一款简约好看的引导页源码,适合做跳转页面