我是一个大二的学生，课设选了一个食堂餐厅管理系统，但是时间有限，所以写的不是很好，随手分享一下，互相学习。
首先展示一些界面图片吧。
首页图片
实现一个图片轮播展示的效果
点餐的界面（鼠标悬停在图片上会显示另一个配套菜，形成规则后面会说）
也有固定的套餐（鼠标悬停显示它的一些特性，维生素什么的）
右边还有一个搜索框（写的不是很完美）
点击提交就会显示包含其中字的菜
点击提交订单，就会先判断是否登录，未登录就会提示你先登录，登录了则扣费并提示支付成功。
所以咱们点击右上角登录
输入正确的账号和密码点击登录就会提示登录成功，然后会跳转到点餐界面，数据都是从数据库里调出来的，菜品，套餐，用户信息都是数据库中的表信息。 这里就不展示成功和失败的效果了。
然后我们发现，个人信息会跟着跳转并显示
然后就可以点餐了，前提是余额足够，不够也不行，会提示失败，需要充值。接下来就说说充值。
充值界面有两个，一个是未登录和已登录两个界面。当然很好理解，没有登录去充值肯定要先登录啦。
已登录的界面，直接充值即可
有个充值跳转效果
未登录的界面
报表界面就是展示套餐的信息，购买量什么的，还有一个最高购买量的喜爱报表。
管理员还没来得及写，本来是想写一个菜品增删改查的，感兴趣的可以自己发挥。
下面是部分代码
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>食堂点餐系统</title>
<link rel="stylesheet" type="text/css" href="CSS/index.css">
<script type="text/javascript" src="JS/reg.js"></script>
<script type="text/javascript" src="JS/index.js"></script>
</head>
<body>
<div id="box">
<center>
<ul>
<ol><a href="index.html">系统首页</a></ol>
<ol><div id="htm" onclick="ST()">食堂环境</div></ol>
<ol><div id="htm" onclick="MS()">美食展示</div></ol>
<ol><div id="htm" onclick="urlhtml()">食堂点餐</div></ol>
<ol><a href="tencent://message/?uin=3290003833&Site=&Menu=yes">联系我们</a></ol>
<ol>
<div class="container">
<span class="ej" onclick="menu()">更多</span>
<div class="eja" onclick="CZ()">充值</div>
<div class="eja" onclick="BB()">报表</div>
<div class="eja">管理员</div>
</div>
</ol>
<ol id="regname"><a href="reg.html">登录</a></ol>
<!-- <li class="regname">登录</li> -->
</ul>
<div style="float: left; color: aqua;" >用户名：<span id="user">#</span><br>余额：<span id="money">0</span></div>
<marquee behavior=alternate direction=right style="margin-left: 20em; margin-right: 20em;"><h2 style="color:antiquewhite; ">@宇颀食堂</h2></marquee>
<br>
<img src="./image/index_img/dian1.jpg" style="width: 540px; height: 230px;">
<br><br><br>
<div id="demo" style="overflow:hidden;height: 150px; display: none;width: 800px; margin-left: 4%; z-index: 10000;">
<table align="left" cellpadding="0" cellspace="0" border="0">
<tr>
<td id="demo1" valign="top" nowrap="nowrap">
<img class="picture" src="./image/index_img/st1.jpg" />
<img class="picture" src="./image/index_img/st2.jpg" />
<img class="picture" src="./image/index_img/st3.jpg" />
<img class="picture" src="./image/index_img/st4.jpg" />
<img class="picture" src="./image/index_img/st5.jpg" />
<img class="picture" src="./image/index_img/st6.jpg" />
<img class="picture" src="./image/index_img/st7.png" />
</td>
<td id="demo2" valign="top" nowrap="nowrap"></td>
</tr>
</table>
</div>
<script>
var speed = 50;
demo2.innerHTML = demo1.innerHTML;
function Marquee() {
if (demo.scrollLeft <= 0) demo.scrollLeft += demo2.offsetWidth;
else {
demo.scrollLeft--;
}
}
var MyMar = setInterval(Marquee, speed);
demo.onmouseover = function() {
clearInterval(MyMar) ; //鼠标悬停时，暂停滚动
}
demo.onmouseout = function() {
MyMar = setInterval(Marquee, speed); //鼠标移开时，开始滚动
}
</script>
<br><br><br><br>
<p>
本食堂系统主要用于减缓食堂空间拥挤，学校就餐人员时间增多，流动不通等弊病。
</p>
<p>
并且为了使食堂的工作效率增加，学生所受的服务更加便捷和多元化，便设计此系统
</p>
<p>
作为食堂和被服务者全新的合作方式。
</p>
<p>
此外，我们还会接收来自广大服务者的反馈以便做出更质量的服务，谢谢支持！
</p>
</center>
<div id="meishi">
<ul id="banner"><img src="./image/order_img/qx.jpg" onclick="qx()" class="delete"/></ul>
<script>
//1.获取ul
var cur_ul = document.getElementById('banner');
// 2.创建一个数组实例
var arr = new Array();
// 用js来创建li、img元素，有多少张图片要轮播就循环多少次
for (i = 1; i <= 4; i++) {
// 创建li元素
var cur_li = document.createElement('li');
// 创建img元素
var cur_img = document.createElement('img')
// 给img元素设置src、width、height属性
cur_img.src = './image/order_img/lun' + i + '.jpg';
cur_img.style.width = '400px';
cur_img.style.height = '200px';
// 把img元素插入到创建的li里面
cur_li.appendChild(cur_img);
// 然后在把li插入到ul里面
cur_ul.appendChild(cur_li);
// 然后给ul元素设置事件，鼠标移进来停止轮播
cur_ul.onmouseenter = function () {
clearInterval(timer);
}
// 鼠标移出ul又继续轮播图片
cur_ul.onmouseleave = function () {
timer = setInterval(get_next, 3000);
}
// 当创建完一个li（li里已经有img元素）就把li添加到arr数组里
arr.push(cur_li);
}
for (i = 5; i <= 9; i++) {//再加一些图片
var cur_li = document.createElement('li');
var cur_img = document.createElement('img');
cur_img.src = './image/order_img/' + i + '.jpeg';
cur_img.style.width = '400px';
cur_img.style.height = '200px';
cur_li.appendChild(cur_img);
cur_ul.appendChild(cur_li);
cur_ul.onmouseenter = function () {
clearInterval(timer)
}
cur_ul.onmouseleave = function () {
timer = setInterval(get_next, 3000)
}
arr.push(cur_li);
}
// 因为所写的轮播图是中间图片放大大，左右两边图片正常，所以要进行下面的操作
var len = arr.length - 1;
// 这是取得左边图片并调整位置
arr[len - 2].style.left = '0px';
// 这是取得中间图片并调整位置
arr[len - 1].style.left = '200px';
// 这是取得右边图片并调整位置
arr[len].style.left = '400px';
// 然后中间图片调用scale使其变大
arr[len - 1].style.transform = 'scale(1.3)';
// 中间图片也给其一个较大的堆叠数值，使其中间图片在左右图片上面
arr[len - 1].style.zIndex = 100;
// 封装轮播图函数
// 然后开始进行轮播，原理就是换arr里的li元素的位置，越靠后的li元素z-index越大
// z-index越大，就会叠在其他li元素上面，所以换arr里的li位置就可以实现轮播
function get_next() {
var give_up = arr[arr.length - 1];//获取arr数值里最后一个li元素
arr.pop();//删除掉最后一个li元素
arr.unshift(give_up);//最后把最后一个元素插入到arr数组的前面
// 然后重新给arr数组里的li元素设置z-index和scale
for (var i = 0; i < arr.length; i++) {
// console.log(i);
arr[i].style.zIndex = i;
arr[i].style.transform = 'scale(1)'
}
// 这步就是展示arr的后三张图片，和前一个步骤的一样
arr[len - 2].style.left = '0px';
arr[len - 1].style.left = '200px';
arr[len].style.left = '400px';
arr[len - 1].style.transform = 'scale(1.3)'//最前面的图片扩大1.3倍
arr[len - 1].style.zIndex = 100;
}
// 声明一个定时器，然后把轮播图函数放进间歇函数，2秒进行一次轮播
var timer = setInterval(get_next, 2000)
</script>
</div>
<br>
<marquee direction=right style="color: red; margin-left: 3em; font-size: 17px;font-weight: bolder;">杜绝浪费，从我做起！</marquee>
<marquee direction=left style="color: red; margin-right: 3em; font-size: 17px;font-weight: bolder;">杜绝浪费，从我做起！</marquee>
</div>
</body>
</html>index.css
*{
margin: 0;
padding: 0;
outline: none;
font-family: "黑体";
}
/* #box{
background: url(../image/index_img/dining_bg.jpeg) ;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
} */
body{
/* background: url(../image/index_img/dining_bg.webp) no-repeat center -400px; */
background: url(../image/index_img/dining_bg.jpg) 0px -230px;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
ul,ol{
float: left;
list-style: none;
line-height: 40px;
display: block;
padding: 0 30px;
font-size: 17px;
}
ul{
margin-left: 150px;
}
a{
text-align: center;
text-decoration: none;
color: rgb(137, 38, 38);
font-size: 17px;
}
a:hover{
color: red;
}
p{
color:blue;
font-size: 18px;
}
table{
width: 600px;
margin: 0 auto;
text-align: center;
border: 1px solid #333333;
/*合并表格边框属性*/
border-collapse: collapse;
}
td,th{
height: 40px;
border: 1px solid #333333;
}
#regname{
margin-left: 170px;
background-color: rgba(10, 179, 246, 0.533);
color: blue;
cursor: pointer;
display: block;
}
#regname:hover{
color: red;
}
#htm{
color: rgb(137, 38, 38);
cursor: pointer;
font-size: 17px;
}
#htm:hover{
color: red;
}
#meishi{
position: relative;
width: 1100px;
height: 300px;
background: rgba(119, 115, 110,0.9);
/* 让这个div显示在最上层 */
z-index: 999;
margin-top: -200px;
margin-left: 80px;
display: none;
}
.container{
overflow: hidden;
position: absolute;
}
.container span{
font-size: 17px;
width: 50px;
/*height: 40px; */
/* line-height: 40px; */
border-radius: 15px;
display: block;
text-align: center;
background: rgba(104, 250, 201, 0.849);
/* background: gray; */
cursor: pointer;
}
.container span:hover{
color: red;
}
.container div{
/* position: absolute; */
width: 60px;
/*height: 40px; */
cursor: pointer;
border-radius: 10px;
line-height: 40px;
text-decoration: none;
background: rgba(104, 250, 201, 0.849);
display: none;
text-align: center;
z-index: 99999;
}
#banner{
height: 200px;
width: 800px;
padding: 0;
position: absolute;
/* 水平居中 */
left: 50%;
margin-left: -400px;
/* 垂直居中 */
/* top: 50%; */
margin-top: 60px;
list-style: none;
}
/* 移入到轮播图区域把鼠标形状变成‘手’ */
#banner:hover {
cursor: pointer;
}
li {
position: absolute;
/* left: 200px; */
/* 过渡属性，让轮播图切换更自然 */
transition: 0.4s;
}
.picture {
width: 230px;
height: 150px;
}
.delete{
width:22px;
height:22px;
border-radius:60%;
position:absolute;
top:-67px;
right:-155px;
}
.eja:hover{
color: red;
}index.js
window.onload=function(){
var url=decodeURI(location.search);
var dd;
var dd1;
var dd2;
var str;
var strs;
if(url.indexOf("?"!=-1)){undefined
str=url.substr(1);
strs=str.split("=");
dd=strs[1];
dd1=strs[2];
dd2=strs[3];
}
var d1=document.getElementById('user');
var d2=document.getElementById('money');
d1.innerHTML=dd1;
d2.innerHTML=dd2;
}
function urlhtml(){
var username=document.getElementById('user');
var money=document.getElementById('money');
window.location.href="order.html?xm=true="+username.innerHTML+"="+money.innerHTML;
}
function MS(){
var meishi=document.getElementById("meishi");
meishi.style.display='block';
}
function qx(){
var meishi=document.getElementById("meishi");
meishi.style.display='none';
}
function ST(){
var demo=document.getElementById('demo');
if(demo.style.display=='none'){
demo.style.display='block';
}else{
demo.style.display='none';
}
}
let ej=document.getElementsByClassName("ej");
let eja=document.getElementsByClassName("eja");
function menu(){
if(eja[0].style.display=='none'){
open(eja);
}else{
close(eja);
}
}
function open(eja){
eja[0].style.display='block';
eja[1].style.display='block';
eja[2].style.display='block';
ej[0].style.background='grey';
}
function close(eja) {
eja[0].style.display='none';
eja[1].style.display='none';
eja[2].style.display='none';
ej[0].style.background='rgba(104, 250, 201, 0.849)';
}
function CZ(){
var username=document.getElementById("user");
var money=document.getElementById("money");
window.location.href="invest.html?xm=true="+username.innerHTML+"="+money.innerHTML;
}
function BB(){
window.location.href="form.html";
}配套餐的规则是价格加起来<=12元即可，所以会有很多种可能，每刷新一次都会不一样。
代码全部放在GitHub，可自行下载。
代码下载链接
https://kgithub.com/wlgq586/Canteen_Restaurant_Management.git这里不做代码讲解，有需要的朋友可以留言，有时间我可以出一期。
我没什么美感，所以界面做的不是很好看，请各位见谅，凑合着看。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
