码迷，mamicode.com
首页 > 其他好文 > 详细

订餐系统

时间：2017-09-21 11:21:12      阅读：283      评论：0      收藏：0      [点我收藏+]

标签：opacity   ati   inpu   标签   att   orm   date   check   details   

<!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>密&nbsp;码:<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>附&nbsp;&nbsp;言:<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+"‘ />&nbsp;&nbsp;"+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; }

自己做的一个订餐系统的小项目，里面有图片的轮换，登录，验证是否登录，菜单的显示等等。

订餐系统

标签：opacity   ati   inpu   标签   att   orm   date   check   details   

原文地址：http://www.cnblogs.com/nanabing/p/7567349.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！