今天吃什么?点餐助手升级版- JS+HTML5

使用了HTML5的本地存储功能,不支持此特性的浏览器将无法使用本应用。建议使用Chrome,Firefox等浏览器。

if(!window.localStorage) {

alert("你的浏览器不支持本地存储所以无法使用此应用!");

return false;

}

var menu = [];

var timer;

var storage = window.localStorage;

if(!storage.length){

$(".menu .tip").show();

}else{

var menuList = "";

for(var i = 0; i < storage.length; i++){

menuList += "

"+storage.getItem(storage.key(i))+" ×";

}

$(".menu .list ul").html(menuList);

menuArray();

}

$("#btn").click(function(){

theSwitch();

});

$(window).keypress(function(event){

event.keyCode === 32 && theSwitch();

event.keyCode === 13 && menuAdd();

});

$(".menu .add .btn").click(function(){

menuAdd();

storage.length && $(".menu .tip").hide();

});

$(".menu .clr").click(function(){

if(window.confirm("确定要清空菜单?")){

$(".menu .list ul li").remove();

storage.clear();

$(".menu .tip").show();

menuArray();

}

});

$(".menu .list li span").on("click",function(){

if(window.confirm("确定要删除这个菜谱?")){

var me = $(this);

menuRemove(me);

storage.removeItem(me.parents("li").index());

}

});

function menuArray(){

var menuItem = "";

for(var i = 0; i < storage.length; i++){

menuItem += storage.getItem(storage.key(i))+",";

}

menuItem = menuItem.substr(0,menuItem.length-1);

menu = menuItem.split(",");

}

function rnd(){

var rnd = parseInt(Math.random() * menu.length);

$("#eat").text(menu[rnd]);

}

function start(){

clearInterval(timer);

timer = setInterval(rnd,20);

}

function stop(){

clearInterval(timer);

}

function theSwitch(){

if($("#btn a").text() === "停止"){

stop();

$("#btn a").text("重新选餐");

}else{

if(!storage.length){

alert("没有菜谱,添加几个吧!");

return false;

}

start();

$("#btn a").text("停止");

}

}

function menuAdd(){

var itemObj = $(".menu .add .item");

var newItem = itemObj.val();

var itemNum = storage.length + 1;

if(!newItem){

alert("请输入菜谱名称!");

return false;

}

storage.setItem("menu"+itemNum,newItem);

$(".menu .list ul").append("

"+newItem+" ×");

menuArray();

itemObj.val("").focus();

}

function menuRemove(me){

var m = me.parents("li");

m.remove();

storage.removeItem(m.attr("data-itemKey"));

!storage.length && $(".menu .tip").show();

menuArray();

}

点餐选择口味的html,今天吃什么?点餐助手升级版- JS+HTML5相关推荐

  1. python编程:实现自助点餐小程序,包括自定义菜单,点餐,账单,结算等功能

    [题目]实现自助点餐小程序,要求满足以下要求: 用户可以通过输入菜名和价格自定义菜单,并将定义的菜单显示出来.接下来,用户可通过输入菜单中菜品的名称进行点餐,,用户点餐完成后提交,显示出用户点餐后的账 ...

  2. c语言编程餐厅点餐系统,C语言实现餐饮管理与点餐系统.pdf

    C语语言言实实现现餐餐饮饮管管理理与与点点餐餐系系统统 本文实例为大家分享了C语言实现餐饮管理与点餐系统的具体代码,供大家参考,具体内 如下 一一..项项目目简简介介 1.本程序实现了用户的点餐功能, ...

  3. 【项目】基于SaaS的餐掌柜项目实战 阶段一 基于SaaS的餐掌柜项目实战 第1章 基础架构搭建 1 餐掌柜需求分析

    [项目]基于SaaS的餐掌柜项目实战 文章目录 [项目]基于SaaS的餐掌柜项目实战 阶段一 基于SaaS的餐掌柜项目实战 第1章 基础架构搭建 1 餐掌柜需求分析 1.1 餐饮行业分析 1.2 餐饮 ...

  4. 服药最佳时间的选择,千万不要乱吃!

    以下推荐吃药最佳时间的选择,希望以此为患者用药有所帮助 [摘要]:吃药是什么时候最好?这是很有讲究的,不同的药物在选择吃药时间也不尽相同,科学地掌握吃药时间可以大大提高药物疗效,同时可以减少不必要的毒 ...

  5. [选择困难症]晚饭不知道吃什么的看过来 转盘选晚饭

    链接放在这里 点击链接 源码链接这里

  6. 微信小程序在线点餐外卖小程序实现方法适合校园点餐毕业设计小程序(含代码解释)

    随着目前的外卖强势入驻,很多的店铺也自己开发了一个自己的在线点餐系统,为了方便顾客可以实时的看到该店铺的菜品,更方便的满足顾客无需走动即可点到自己想吃的饭菜! 开发了这款微信小程序主要包含功能:微信登 ...

  7. 基于html的网上点餐系统,一种基于客户端的网上点餐系统的制作方法

    本发明涉及互联网技术领域,具体为一种基于客户端的网上点餐系统. 背景技术: 互联网是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一且巨大的全球化网络,在这个网络中有交 ...

  8. 外卖点餐列表滑动 微信小程序_外卖点餐微信小程序的详细解决方案

    随着移动互联网的发展,以及人们生活节奏的加快,工作生活之余,大家都习惯通过手机点餐.而这对于许多餐饮企业来说,就完全具备了通过长沙小程序开发,打造外卖点餐小程序的条件.那么接下来,创研科技就给大家谈谈 ...

  9. 扫码点餐小程序源码_扫码点餐小程序有什么用?怎么制作?

    现在小程序扫码点餐服务已经越来越普及,当用户需要点餐时,无需麻烦服务人员,只需扫描餐桌上或者海报上的小程序码,就能快速点餐下单.这样不仅节约了排队时间,也提高了商家自己的服务效率. 上线了小程序案例, ...

最新文章

  1. NASA 开放巨量 VICAR 源码:近 350 款应用程序
  2. ExclusiveTouch
  3. Python,美国顶尖大学里最受欢迎的编程入门语言
  4. 自动让钱生钱方法100%安全稳定
  5. [Java] 蓝桥杯BASIC-18 基础练习 矩形面积交
  6. C语言查看tuxedo队列长度,tuxedo的常用启、停、参数讲解、日志查看
  7. SVN客户端服务器搭建与使用(一)
  8. 【图像检索】基于matlab Hu不变矩图像检索【含Matlab源码 755期】
  9. leetCode-458. Poor Pigs
  10. 西游记中揭示的深刻人生哲理
  11. arch-yaourt安装
  12. Win2000请求拨号路由服务详解
  13. 防住CV中这颗“不定时炸弹”,有哪些捷径?丨独家公开课实录(4)
  14. 带你了解大数据时代的基本特征
  15. 从网页到微信小程序开发:一:小程序与普通网页的区别
  16. 最全Pycharm教程(1)——定制外观
  17. Linux ss命令使用
  18. 【Bug解决】Could not find resource com/kuang/mapper/Mapper.xml
  19. Java Web之过滤器Filter(@WebFilter)
  20. 微型计算机原理存储器寻址,微机原理存储器部分 微型计算机原理及应用教材.ppt...

热门文章

  1. 百练2787:算24题解
  2. 企业怎么进行职务设计?
  3. 时间锁,手把手教你如何用Java设置随时间变化的动态密码
  4. 游戏服务器宠物系统如何实现,宠物王国PK系统介绍 瞬间转换服务器
  5. Chemkin模拟煤粉烟气循环对氮氧化物产量的影响
  6. PHP3 设计模式、COMPOSER、异常处理
  7. mysql replicate_do_db_mysql中replicate_wild_do_table和replicate_do_db区别
  8. UnityShader学习——内置时间变量及其应用
  9. SpringMVC拦截器详解
  10. softmax loss对输入的求导推导