在制作和整理这些课程设计我们花费了大量的时间、资金，希望能够给您带来更好的体验，觉得我们的内容还可以的话
请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
项目介绍
利用技术：html/css/js/jquery
前端课程设计比较简单，可以根据自己的需要更改一下前端的内容，公众号中有具体的介绍。
页面效果展示
网站代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>order</title>
<link rel='stylesheet' href='css/jedate.css'>
<link rel='stylesheet' href='css/base.css'>
</head>
<body id="wrap">
<header>
<h1>
<a href="index.html">
<img src="images/logo.png" alt="" />
</a>
</h1>
<div id="top_search">
<div class="search_index">
<input class="searchtext" type="text" name="search" value="搜一搜"/>
<input class="submit_bt" type="text" value="搜索" name="submit_bt"/>
</div>
</div>
<div id="shop_user">
<div class="box_shop">
<!-- /justIT/jsp/user/cart.jsp -->
</div>
<div class="box_user box_shop_user">
<!--
<div>
<a href="login.html">登录</a>
<span>|</span>
<a href="register.html">注册</a>
</div>
-->
</div>
</div>
</header>
<div class="banner_menu">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="scene.html">风景区</a></li>
<li><a href="order.html" id="module">订单管理</a></li>
<li><a href="financial.html">财务管理</a></li>
<li><a href="personal.html">个人中心</a></li>
<li><a href="notification.html">平台通知</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="content">
<form class="orderSearch" method="get">
<div class="rows">
<div class="palyerMsg">
<div class="orderTypeMsg">
<label class="timeLabel">时间：</label>
<input type="text" class="inputMsg startTime" data-language="en" value="">
-
<input type="text" class="inputMsg endTime" data-language="en" value="">
</div>
</div>
<div class="rows">
<div class="palyerMsg">
<label>票型名：</label>
<div class="orderTypeMsg">
<div>
<input type="text" class="inputMsg on-selected ticketTypeLength" value="" readonly>
<input type="hidden" value="" class="rName rstatusFlag">
</div>
<ul class="orderType">
<li>
<a href="javascript:void(0)" value="0">全部</a>
</li>
<li>
<a href="javascript:void(0)" value="1">76</a>
</li>
<li>
<a href="javascript:void(0)" value="2">77</a>
</li>
<li>
<a href="javascript:void(0)" value="3">78</a>
</li>
<li>
<a href="javascript:void(0)" value="4">79</a>
</li>
<li>
<a href="javascript:void(0)" value="5">80</a>
</li>
<li>
<a href="javascript:void(0)" value="6">81</a>
</li>
<li>
<a href="javascript:void(0)" value="7">82</a>
</li>
</ul>
</div>
<label>订单状态：</label>
<div class="orderTypeMsg">
<div>
<input type="text" class="inputMsg on-selected b1" value="全部" readonly>
<input type="hidden" value="6" class="realNum rStatus">
<em class="i-triangle">
<i class="triangle1"></i>
</em>
</div>
<ul class="orderType">
<li value="666">
<a href="javascript:void(0)" value="6">全部</a>
</li>
<li>
<a href="javascript:void(0)" value="0">购票成功</a>
</li>
<li>
<a href="javascript:void(0)" value="1">验票完毕</a>
</li>
<li>
<a href="javascript:void(0)" value="2">退票完毕</a>
</li>
<li>
<a href="javascript:void(0)" value="3">部分退票尚未验票</a>
</li>
<li>
<a href="javascript:void(0)" value="4">部分退票部分验票</a>
</li>
<li>
<a href="javascript:void(0)" value="5">部分验票成功</a>
</li>
<li>
<a href="javascript:void(0)" value="6">更复杂的状态</a>
</li>
</ul>
</div>
<label>查询方式：</label>
<div class="orderTypeMsg">
<div>
<input type="text" class="inputMsg on-selected b1" value="详单查询" readonly>
<input type="hidden" value="DETAIL" class="realNum rFlag">
<em class="i-triangle">
<i class="triangle1"></i>
</em>
</div>
<ul class="orderType">
<li>
<a href="javascript:void(0)" value="DETAIL">详单查询</a>
</li>
<li>
<a href="javascript:void(0)" value="GroupByDistributorName">按分销商统计查询</a>
</li>
<li>
<a href="javascript:void(0)" value="GroupByTicketTypeName">按票型名统计查询</a>
</li>
</ul>
</div>
</div>
<input type="button" value="查询" class="search searchbyTime">
</div>
<div class="rows">
<div class="palyerMsg">
<label>游客手机号 / 游客姓名 / 订单号 / 电子票二维码号：</label>
<input type="text" class="inputMsg multiple focusEvent">
</div>
<input type="button" value="查询" class="search searchbyMultiple">
</div>
</form>
<div class="orderList">
<div class="distributorMsg">
<div class="distributorType">
<div class="orderTypeMsg">
<div class="orderSelect">
<input type="text" class="inputMsg b1 b2" value="下单时间" readonly>
<input type="hidden" value="0" class="realNum">
<em class="i-triangle i-triangle2 i-triangle3 b3">
<i class="triangle2"></i>
</em>
</div>
<ul class="orderType orderTime">
<li>
<a href="javascript:void(0)" value="0">下单时间 ▼</a>
</li>
<li>
<a href="javascript:void(0)" value="1">下单时间 ▲</a>
</li>
<li>
<a href="javascript:void(0)" value="2">游玩时间 ▼</a>
</li>
<li>
<a href="javascript:void(0)" value="3">游玩时间 ▲</a>
</li>
</ul>
</div>
<label>分销渠道：</label>
<input type="radio" class="channel produceSelect" value="3" name="channelChoices" checked="checked">全部</input>
<input type="radio" class="channel" value="1" name="channelChoices">仅自己</input>
<input type="radio" class="channel" value="2" name="channelChoices">下级分销商</input>
</div>
</div>
<div class="orders">
<div class="order no-border">
<ul class="titleName">
<li class="name1 allId">票信息
</li>
<li class="name3">游玩人</li>
<li class="name2">分销商</li>
<li class="name4">订单金额/支付方式</li>
<li class="name4">订单状态</li>
<li class="name5">操作</li>
</ul>
<div class="clear noMenu">
<p class="noText">请输入条件搜索订单</p>
</div>
<div class="menuDiff"></div>
</div>
</div>
<div class="ordersGroup">
<div class="gTitle">
<a href="" class="gnumber">票数</a>
<a href="" class="gmoney">金额</a>
</div>
<ul class="titleName2">
<li class="name8">
<span>
<a href="" class="allId">票型名</a>
</span>
</li>
<li class="name6">已购买总数</li>
<li class="name6">已验票总数</li>
<li class="name6">剩余可用票总数</li>
<li class="name6"></li>
<li class="name7"></li>
</ul>
</div>
<div class="calcleMenu">
<div class="ticketMsg2"><span>电子门票</span><input type="text" class="basicMsg electName" value="" readonly></div>
<div class="ticketMsg2"><span>票数</span><input type="text" class="basicMsg cancleNum" value=""></div>
<button value="" class="orderSure2">退票</button>
<button value="" class="orderAdd2">新增</button>
<button value="" class="orderCancle2">取消</button>
</div>
<div class="calcleMenu2">
<div class="ticketMsg2"><span>电话号码</span><input type="text" class="basicMsg phoneNum" value=""></div>
<button value="" class="orderSure3">确定</button>
<button value="" class="orderCancle3">取消</button>
</div>
<div id="calcleMenu3">
</div>
<div id="container">
</div>
</div>
<div class="clear"></div>
<div class="link_page">
<a href="#" class="open">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<span class="moremark">....</span>
<a href="#">></a>
<input class="empty" value="">
<a href="#">跳转</a>
</div>
</div>
<div class="bg_w">
<footer class="footer ">
<p class="flink">
<a href="" class="fstrong">所有景区</a>
<a href=""> 精选推荐</a>
<a href="">今日推荐 </a>
<a href="">人气景区</a>
<a href="">猜你喜欢</a>
<a href="" class="fstrong">关于我们</a>
<a href=""> 关于网站</a>
<a href="">联系我们</a>
<a href=""> 加入我们</a>
<a href="" class="fstrong">用户帮助</a>
<a href=""> 新手指南</a>
<a href="">网站地图</a>
<a href=""> 意见反馈</a>
</p>
<p>
Copyright ©2013-2015 zhaopiao.net 版权所有 沪ICP备14014674号-3
</p>
<p>
客服电话：800-920-8820 技术支持：xxxxxxxx
</p>
</footer>
</div>
</body>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript">
if(!getCookie("UserName")){
alert("您尚未登录，请先登录");
window.location.href="login.html";
}
</script>
<script type='text/javascript' src='js/jquery.md5.js'></script>
<script type="text/javascript" src="js/jquery.jedate.js"></script>
<script type="text/javascript">
$(".startTime").jeDate({
isinitVal:true,
format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月
initAddVal:[-7,"DD"]
})
$(".endTime").jeDate({
isinitVal:true,
format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月
})
</script>
<script type="text/javascript" src="js/base.js"></script>
</html>
课程设计实践报告
Bilibili视频演示
【源码获取】
我们分享了非常多的课程设计资料，以便让大家更好的学习，扫码关注下方公众号 大学生知识分享地 或直接搜索公众号名称在里面即可获取所有内容！
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
