<!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; }

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