订餐系统
<!doctype html> <html> <head> <meta charset="utf-8"> <title>蜡笔小新订餐网</title> <link rel="shortcut icon" href="images/logo.png" /> <link rel="stylesheet" href="basic.css" /> </head> <style> #lishi{ width:170px; height:160px; position:absolute; left:290px; top:67px; text-align:center; font-size:14px; color:#666; cursor:pointer; } .bigbox #shopcar{ width:180px; height:638px; background:rgba(204,204,204,0.8); display:none; position:absolute; top:-5px; right:-180px; border-radius:16px; font-size:12px; color:#333; opacity:1; animation:two 1s; -moz-animation:two 1s; /* Firefox */ -webkit-animation:two 1s; /* Safari and Chrome */ -o-animation:two 1s; /* Opera */ } .bigbox #shopcar #food{ margin-left:15px; margin-top:12px; } .bigbox #shopcar #allprice{ font-size:12px; color:#333; margin-left:15px; } .bigbox #shopcar #addnum,#reducenum{ display:inline-block; width:18px; height:18px; } .bigbox #shopcar #addnum{ margin-left:28px; margin-right:8px; background:url(images/num.png) -28px 0px; position:absolute; left:80px; } .bigbox #shopcar #reducenum{ margin-left:7px; background:url(images/num.png) -1px 0px; position:absolute; left:145px; } .bigbox #shopcar #num{ display:inline-block; width:30px; height:20px; text-align:center; line-height:20px; position:absolute; left:124px; } .bigbox #shopcar #order{ display:inline-block; width:50px; height:20px; background:#666; border-radius:6px; color:#fff; line-height:20px; text-align:center; position:absolute; right:8px; bottom:10px; z-index:1; cursor:pointer; } #foodnum{ display:inline-block; background-color:#F00; color:#fff; width:20px; height:20px; text-align:center; line-height:20px; border-radius:20px; position:absolute; right:55px; top:13px; } #left #imgs{ width:401px; height:283px; position: relative; top:130px; left:20px; border:#fff 2px solid; border-radius:8px; } #imgs #scroll_num{ position:absolute; left:15px; bottom:5px; } #imgs #scroll_num li{ display:inline-block; width:15px; height:15px; list-style:none; border:#999 1px solid; text-align:center; line-height:15px; color:#999; border-radius:5px; cursor:pointer; } #imgs #scroll_num .theLi{ border:red 1px solid; } #bgdetails{ width:1000px; height:630px; background:rgba(204,204,204,0.9); position:absolute; z-index:20; border-radius:14px; display:none; text-align:center; line-height:30px; color:#000; } #bgdetails hr{ width:800px; color:#eee; } #close_bg{ display:inline-block; width:30px; height:30px; border:#90C solid 1px; border-radius:30px; color:#90C; line-height:30px; text-align:center; font-size:32px; margin-left:950px; margin-top:15px; } #close_bg:hover{ border:#f00 solid 1px; color:#f00; } #detimg{ border:2px solid #90C; border-radius:12px; } #hot{ position:relative; top:70px; left:80px; } #hotp{ position:absolute; color:#fff; font-size:13px; top:-28px; left:38px; } #hot0,#hot1,#hot2{ position:relative; top:-10px; color:#666; font-size:14px; line-height:30px; cursor:pointer; } #hr{ display:block; border-radius:5px 5px; width:20px; height:20px; color:#fff; position:relative; left:95px; top:-30px; font-size:15px; text-align:center; } #hc{ display:block; border-radius:5px 5px; width:20px; height:20px; color:#fff; position:relative; left:-100px; top:27px; } #show{ cursor:pointer; } </style> <link rel="stylesheet" href="shopcar_1.css" > <body> <div class="bigbox"> <div id="hidebg"></div> <div id="bgdetails"> <span id="close_bg">X</span> </div> <div class="smallbox"> <div id="left"> <div id="bgleft"></div> <div id="hot"> <p id="hotp">今日热销</p> <p><img src="images/hot.png" /><span id="hot0">敬请期待</span></p> <p><img src="images/hot.png" /><span id="hot1">敬请期待</span></p> <p><img src="images/hot.png" /><span id="hot2">敬请期待</span></p> </div> <div id="content" style="display:none"> <p><span id="details">菜单详情</span><span id="x">X</span></p> <div id="foodimg"> <div id="foods"></div> </div> <span id="dishes"></span> <span id="normal"></span> <span id="real"></span> <span id="buyfood">立即购买</span> </div> <p id="jilu">历史记录</p> <div id="lishi"></div> <p id="time"></p> <div id="imgs"> <img src="images/1.jpg" id="pic"/> <ul id="scroll_num"> <li onmouseover="show(1)" onmouseout="start()" id="theLi1" class="theLi">1</li> <li onmouseover="show(2)" onmouseout="start()" id="theLi2">2</li> <li onmouseover="show(3)" onmouseout="start()" id="theLi3">3</li> </ul> </div> </div> <div id="right"> <div id="show"></div> </div> <div id="Login"> <span id="close">X</span> <form action="" name="myform"> <p>用户名:<input type="text" id="username" name="username" /></p> <p>密 码:<input type="password" id="pwd" name="pwd" /></p> <p>验证码:<input type="text" name="valcode"id="valcode" /></p> <img src="http://192.168.15.59:8080/res/verifyCodeServlet" id="codeimg" alt="看不清，点击切换"/> </form> <p id="word">LOGIN</p> </div> <div id="Login_1"> <span id="close_x">X</span> <form action="" name="myform1"> <p>送货地址:<input type="text" id="address" name="address" /></p> <p>联系方式:<input type="password" id="tel" name="tel" /></p> <p>送货时间:<input type="text" name="deliverytime"id="deliverytime" /></p> <p>附 言:<input type="text" name="ps"id="ps" /></p> </form> <p id="word_1">确认</p> </div> </div> <div class="button"> <span id="showuser" style="display:none"></span> <span id="login"><b>登录</b></span> <div id="car"></div> <span id="foodnum" style="display:none"></span> <!--<span id="shop"><b>购物车</b></span>--> </div> <div id="shopcar"> <span id="order">确定下单</span> </div> </div> <div id="volet_clos"> <div id="volet"> <a href="#volet_clos" aria-hidden="true" id="hc"><img src="images/hc.png" /></a> <p>版权所在</p> <p>廖友新&&丁俐伊</p> <a href="#volet" aria-hidden="true" id="hr"><img src="images/hr.png" /></a> </div> </div> <script src="../json/yc.js"></script> <script> //图片轮换 var theLi=document.querySelectorAll("#scroll_num li"); for(var i=0;i<theLi.length;i++){ } var timer=setInterval("show()",2000); var index=1; function show(id){ if(id){ clearInterval(timer); index=id; }else{ index=index%3+1; } if(index==1){ yc.$("#theLi1").setAttribute("style","border:1px solid red;"); yc.$("#theLi2").setAttribute("style","border:1px solid #999;"); yc.$("#theLi3").setAttribute("style","border:1px solid #999;"); }else if(index==2){ yc.$("#theLi2").setAttribute("style","border:1px solid red;"); yc.$("#theLi1").setAttribute("style","border:1px solid #999;"); yc.$("#theLi3").setAttribute("style","border:1px solid #999;"); } else if(index==3){ yc.$("#theLi3").setAttribute("style","border:1px solid red;"); yc.$("#theLi1").setAttribute("style","border:1px solid #999;"); yc.$("#theLi2").setAttribute("style","border:1px solid #999;"); } document.getElementById("pic").setAttribute("src","images/"+index+".jpg"); } function start(){ timer=setInterval("show()",2000); } //登录框显示隐藏 var myLogin=document.getElementById("login"); var myTheLogin=document.getElementById("Login"); var theClose=document.getElementById("close"); myLogin.onclick=function(){ yc.$("#Login").style.display="block"; yc.$("#hidebg").style.display="block"; }; theClose.onclick=function(){ myTheLogin.style.display="none"; yc.$("#hidebg").style.display="none"; }; //购物车 var theLogin=document.getElementById("car"); var theTheLogin=document.getElementById("Login_1"); var myClose=document.getElementById("close_x"); theLogin.onclick=function(){ theTheLogin.style.display="block"; }; myClose.onclick=function(){ theTheLogin.style.display="none"; }; //单击更换验证码yc.$("") yc.$("#codeimg").onclick=function(){ //缓存问题 很严重 //当两个请求是一模一样的时候，客户端是不会重新去发送请求，而是就用原先的那个请求 //解决：把请求变的不一样 在后面加 Math.random() 或者 date.getTime() this.src="http://218.196.14.220:8080/res/verifyCodeServlet?vacode"+Math.random(); }; //用户登录 yc.$("#word").onclick=function(){ //1拼接参数 var url="op=login&"+yc.serialize(myform); //console.log(url); //定义options var options={ success:function(){ //先获取数据 var json=this.responseJSON; if(json.code==0){ alert("用户名或者密码错误"); }else if(json.code==1){ //登录成功 yc.$("#Login").style.display="none"; yc.$("#hidebg").style.display="none"; yc.$("#login").style.display="none"; yc.$("#showuser").style.display="block"; //防止a标签跳转网页 yc.$("#showuser").innerHTML="欢迎，"+yc.$("#showuser").value+"。<a href='javascript:void(0)' id='exit' onclick='ex()'>退出</a>"; } } }; //发请求 yc.xssRequest("http://218.196.14.220:8080/res/resuser.action?"+url,options); }; //每次刷新网页的时候，我们应该判断一下用户有没有登录 window.onload=function(){ var options={ success:function(){ //得到响应的值 var json=this.responseJSON; if(json.code==1){ //有登陆 yc.$("#login").style.display="none"; yc.$("#showuser").style.display="block"; //防止a标签跳转网页 yc.$("#showuser").innerHTML="欢迎，"+json.obj.username+"。<a href='javascript:void(0)' id='exit' onclick='ex()'>退出</a>"; }else{ //意味着没有登录，或者已经退出 yc.$("#login").style.display="block"; yc.$("#showuser").style.display="none"; } } }; yc.xssRequest("http://218.196.14.220:8080/res/resuser.action?op=checkLogin",options); }; //退出 function ex(){ //清空登录信息 yc.$("#showuser").innerHTML=""; yc.$("#login").style.display="block"; yc.$("#showuser").style.display="none"; var options={ success:function(){ //删除cookie,在服务器端已经帮我们做了，所以这里不需要做任何操作 } }; yc.xssRequest("http://218.196.14.220:8080/res/resuser.action?op=logout",options); } //菜的显示 var str=""; var options={ success:function(){ var json=this.responseJSON; for(var i=0;i<json.obj.length;i++){ str+="<div width='180px' height='40px' class='menuPic' id='f"+i+"'>"; str+="<img width='40px' height='40px' id='foodPic' src='http://218.196.14.220:8080/res/images/"+json.obj[i].fphoto+"'>"; str+="<span id='foodid'>"+json.obj[i].fname+"</span>"; str+="</div>"; } yc.$("#show").innerHTML=str; //添加点击事件 for(var i=0;i<json.obj.length;i++){ //闭包 (function(index){ yc.$("#f"+index).onclick=function(){ //显示层 yc.$("#content").style.display="block"; yc.$("#bgleft").style.display="block"; fid=json.obj[index].fid; yc.$("#foods").innerHTML='<img id="s'+fid+'" width="142px" height="95px" src="http://218.196.14.220:8080/res/images/'+json.obj[index].fphoto+'">'; yc.$("#dishes").innerHTML='菜名：'+json.obj[index].fname; yc.$("#normal").innerHTML='标准价：'+json.obj[index].normprice; yc.$("#real").innerHTML='惊爆价：'+json.obj[index].realprice; }; yc.$("#x").onclick=function(){ //删除层 yc.$("#content").style.display="none"; yc.$("#bgleft").style.display="none"; }; yc.$("#hot0").innerHTML="<img width='40px' height='40px' src='http://218.196.14.220:8080/res/images/"+json.obj[5].fphoto+"'>"; yc.$("#hot1").innerHTML="<img width='40px' height='40px' src='http://218.196.14.220:8080/res/images/"+json.obj[6].fphoto+"'>"; yc.$("#hot2").innerHTML="<img width='40px' height='40px' src='http://218.196.14.220:8080/res/images/"+json.obj[7].fphoto+"'>"; //显示历史数据 yc.$("#lishi").innerHTML=""; showHistory(); })(i) } } }; yc.xssRequest("http://192.168.15.237:8080/res/resfood.action?op=findAllFoods",options); //历史记录详情 function showHistory(){ var options={ success:function(){ var json=this.responseJSON.obj; //console.log(json); for(var i=json.length-1;i>=0;i--){ //倒序输出，因为最新的历史记录，应该是显示在最前面 var bname=json[i].fname; var p=document.createElement("p"); p.id=json[i].fid; p.innerHTML=bname; var tag=yc.$("#lishi").getElementsByTagName("p"); if(tag.length>=8){ yc.$("#lishi").removeChild( yc.$("#lishi").firstChild ); yc.$("#lishi").appendChild(p); }else{ //添加子节点 yc.$("#lishi").appendChild(p); } } yc.$("#lishi").onclick=function(){ } } }; yc.xssRequest("http://192.168.15.237:8080/res/resfood.action?op=findAllSelectedFoods",options); } //购买食物 yc.$("#buyfood").onclick=function(){ var options={ success:function(){ var json=this.responseJSON; if(json.code!=1){ alert(json.msg); }else{ //成功 shop(); } } }; yc.xssRequest("http://192.168.15.237:8080/res/resorder.action?op=order&fid="+fid+"&num=1",options); }; // 购物车 function shop(){ //alert("添加成功"); // 先找出购物车里所有的东西 var shopcar={ success:function(){ var json=this.responseJSON; var count=0; // 因为不是数组了，所以不能直接length出长度 for( var a in json.obj){ if( json.obj.hasOwnProperty(a)){ // 存在这个属性 count++; } } // 得到你这个里面有多少数据了 //console.log( count); if(count>0){ yc.$("#shopcar").innerHTML=""; // 购物车里有数据，就显示到网页中去 for( var i in json.obj){ // 先得到所有的数据 fprice=json.obj[i].smallCount; fnum=json.obj[i].num; fid=json.obj[i].food.fid; fod=json.obj[i].food; // 创建节点 var div=document.createElement("div"); var p=document.createElement("p"); var span1=document.createElement("span"); var span2=document.createElement("span"); var span3=document.createElement("span"); var span4=document.createElement("span"); span3.id="addnum"; span4.id="reducenum"; yc.$("#content").style.display="none"; yc.$("#bgleft").style.display="none"; p.id=fid; p.innerHTML="<img width='18px' height='18px' src='http://218.196.14.220:8080/res/images/"+fod.fphoto+"' /> "+fod.fname; span1.innerHTML="<span id='allprice'>小计："+fprice+"</span>"; span2.innerHTML="<span id='num'>"+fnum+"</span>"; (function(fid){ //span3的点击事件，添加数量 span3.onclick=function(){ var num=1; var options={ success:function(){ yc.$("#shopcar").innerHTML=null; shop(); yc.$("#shopcar").innerHTML='<span id="order">确定下单</span>'; } }; yc.xssRequest("http://192.168.15.237:8080/res/resorder.action?op=orderJson&num="+num+"&fid="+fid,options); }; //span4的点击事件，添加数量 span4.onclick=function(){ var num=-1; var options={ success:function(){ yc.$("#shopcar").innerHTML=null; shop(); yc.$("#shopcar").innerHTML='<span id="order">确定下单</span>'; } }; yc.xssRequest("http://192.168.15.237:8080/res/resorder.action?op=orderJson&num="+num+"&fid="+fid,options); } })(fod.fid); // 添加到div中去 div.appendChild(p); div.appendChild(span1); div.appendChild(span2); div.appendChild(span3); div.appendChild(span4); // 把购物车添加到网页里面去 yc.$("#shopcar").insertBefore(div,yc.$("#order")); } //显示商品数量 yc.$("#foodnum").style.display="block"; yc.$("#foodnum").innerHTML=yc.$("#shopcar").getElementsByTagName("div").length; }else{ // 没有数据 yc.$("#shopcar").style.display="none"; } } }; yc.xssRequest("http://192.168.15.237:8080/res/resorder.action?op=getCartInfo",shopcar) } yc.$("#car").onclick=function(){ //首先做判断 var abc=yc.$("#shopcar").getElementsByTagName("div").length; if(abc>0){ //意味着你的购物车有东西 if(yc.$("#shopcar").style.display!="block"){ yc.$("#shopcar").style.display="block"; }else{ yc.$("#shopcar").style.display="none"; } }else{ //购物车没有东西 alert("请先添加商品"); } }; </script> </body> </html>
/** * Created by Administrator on 2017/5/20. */ yc.$("#car").onclick=function(){ //首先做判断 if(yc.$("#shopcar").getElementsByTagName("div").length>0){ //意味着你的购物车有东西 if(yc.$("#shopcar").style.dipslay="block"){ yc.$("#shopcar").style.dipslay="block"; }else{ yc.$("#shopcar").style.dipslay="none"; } }else{ //购物车没有东西 alert("请先添加商品"); } }
#volet { width: 200px; padding: 10px; background: #B38EB3; color: #fff; text-align:center; border-radius:10px 10px; } #volet a.ouvrir, #volet a.fermer { padding: 10px 25px; background:#90C; color: #fff; text-decoration: none; } #volet { position: absolute; left: -190px; /* test fixed + scroll, on retire la position top */ -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; transition: all .5s ease-in; } #volet a.ouvrir, #volet a.fermer { position: absolute; right: -88px; top: 150px; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); -moz-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; } #volet a.fermer { display: none; } #volet:target { left: 10px; } /* code pour la fermeture */ #volet:target a.fermer { display: block; } #volet:target a.ouvrir { display: none; } #volet_clos:target #volet { left: -190px; } /* test fixed + scroll */ #volet_clos { position: fixed; top: 55px; left: 0; }
自己做的一个订餐系统的小项目，里面有图片的轮换，登录，验证是否登录，菜单的显示等等。
