<!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; }
自己做的一个订餐系统的小项目，里面有图片的轮换，登录，验证是否登录，菜单的显示等等。
时间： 2024-10-24 12:43:25