layui构建考试系统小Demo
一、题目
题目如下，仅构建考试系统的前端界面，无需后台实现。
二、上下文图
三、效果
四、工程目录
其中layui包可从layui官网下载，layui官网：https://www.layui.com/
五、代码
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>登录界面</title> 6 <script src=".//layui/layui.js"></script> 7 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 8 <meta name="renderer" content="webkit"> 9 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 10 <meta name="viewport" 11 content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> 12 <link rel="stylesheet" href=".//layui/css/layui.css" media="all"> 13 <link rel="stylesheet" href=".//style/admin.css" media="all"> 14 <link rel="stylesheet" href=".//style/login.css" media="all"> 15 </head> 16 <body> 17 <div class="layadmin-user-login layadmin-user-display-show" 18 id="LAY-user-login" style="display: none;"> 19 20 <div class="layadmin-user-login-main"> 21 22 <div class="layadmin-user-login-box layadmin-user-login-header"> 23 <h2>考试系统</h2> 24 </div> 25 26 <div 27 class="layadmin-user-login-box layadmin-user-login-body layui-form"> 28 29 <div class="layui-form-item"> 30 <label 31 class="layadmin-user-login-icon layui-icon layui-icon-username" 32 for="LAY-user-login-username"></label> <input type="text" 33 name="username" id="username" lay-verify="required" 34 placeholder="用户名" class="layui-input"> 35 </div> 36 <div class="layui-form-item"> 37 <label 38 class="layadmin-user-login-icon layui-icon layui-icon-password" 39 for="LAY-user-login-password"></label> <input type="password" 40 name="password" id="password" lay-verify="required" 41 placeholder="密码" class="layui-input"> 42 </div> 43 <div class="layui-form-item"> 44 <label class="layui-form-label">身份</label> 45 <div class="layui-input-inline"> 46 <select id="identity" name="identity"> 47 <option value="">请选择</option> 48 <option value="">系统管理员</option> 49 <option value="">教师</option> 50 <option value="">学生</option> 51 </select> 52 </div> 53 </div> 54 <div class="layui-form-item" style="margin-bottom: 20px;"> 55 <input type="checkbox" name="remember" lay-skin="primary" 56 title="记住密码"> <a href="#" 57 class="layadmin-user-jump-change layadmin-link" 58 style="margin-top: 7px;">忘记密码？</a> 59 </div> 60 <div class="layui-form-item"> 61 <button class="layui-btn layui-btn-normal" 62 onclick="window.location.href='Admin.html'">登录管理员</button> 63 <button class="layui-btn layui-btn-normal" 64 onclick="window.location.href='Teacher.html'">登录教师</button> 65 <button class="layui-btn layui-btn-normal" 66 onclick="window.location.href='Student.html'">登录学生</button> 67 </div> 68 <div class="layui-trans layui-form-item layadmin-user-login-other"> 69 <a href="Zhuce.html" class="layadmin-user-jump-change layadmin-link">注册帐号</a> 70 </div> 71 </div> 72 </div> 73 </div> 74 <script> 75 layui.use('form', function() { 76 var form = layui.form; 77 form.render(); 78 }); 79 </script> 80 </body> 81 </html>
Zhuce.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>注册界面</title> 6 <script src=".//layui/layui.js"></script> 7 <meta name="renderer" content="webkit"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 9 <meta name="viewport" 10 content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> 11 <link rel="stylesheet" href=".//layui/css/layui.css" media="all"> 12 <link rel="stylesheet" href=".//style/admin.css" media="all"> 13 <link rel="stylesheet" href=".//style/login.css" media="all"> 14 </head> 15 <body> 16 <form action="ZhuceServlet" method="post"> 17 <div class="layadmin-user-login layadmin-user-display-show" 18 id="LAY-user-login" style="display: none;"> 19 <div class="layadmin-user-login-main"> 20 <div class="layadmin-user-login-box layadmin-user-login-header"> 21 <h2>新用户注册界面</h2> 22 </div> 23 <div 24 class="layadmin-user-login-box layadmin-user-login-body layui-form"> 25 <div class="layui-form-item"> 26 <label class="layadmin-user-login-icon layui-icon layui-icon-username" 27 for="LAY-user-login-name"></label> <input type="text" name="name" 28 id="LAY-user-login-nickname" lay-verify="name" placeholder="用户名" 29 class="layui-input"> 30 </div> 31 <div class="layui-form-item"> 32 <label 33 class="layadmin-user-login-icon layui-icon layui-icon-password" 34 for="LAY-user-login-password"></label> <input type="password" 35 name="password" id="LAY-user-login-password" 36 lay-verify="password" placeholder="密码" class="layui-input"> 37 </div> 38 <div class="layui-form-item"> 39 <label 40 class="layadmin-user-login-icon layui-icon layui-icon-password" 41 for="LAY-user-login-repass"></label> <input type="password" 42 name="repass" id="LAY-user-login-repass" lay-verify="required" 43 placeholder="确认密码" class="layui-input"> 44 </div> 45 <div class="layui-input-item"> 46 <lable class="layui-form-label">性别</lable> 47 <input type="radio" name="sex" value="男" title="男" checked=""> 48 <input type="radio" name="sex" value="女" title="女"> 49 </div> 50 <div class="layui-form-item"> 51 <label class="layui-form-label">身份</label> 52 <div class="layui-input-inline"> 53 <select id="identity" name="identity"> 54 <option value="">请选择</option> 55 <option value="">系统管理员</option> 56 <option value="">教师</option> 57 <option value="">学生</option> 58 </select> 59 </div> 60 </div> 61 <div class="layui-form-item"> 62 <label 63 class="layadmin-user-login-icon layui-icon layui-icon-cellphone" 64 for="LAY-user-login-phone"></label> <input type="text" 65 name="phone" id="LAY-user-login-phone" lay-verify="phone" 66 placeholder="电话号码" class="layui-input"> 67 </div> 68 <div class="layui-form-item"> 69 <label 70 class="layadmin-user-login-icon layui-icon layui-icon-email" 71 for="LAY-user-login-email"></label> <input type="text" 72 name="email" id="LAY-user-login-email" lay-verify="email" 73 placeholder="电子邮箱" class="layui-input"> 74 </div> 75 <div class="layui-form-item"> 76 <label 77 class="layadmin-user-login-icon layui-icon layui-icon-location" 78 for="LAY-user-login-address"></label> <input type="text" 79 name="address" id="LAY-user-login-address" lay-verify="address" 80 placeholder="家庭住址" class="layui-input"> 81 </div> 82 <div class="layui-form-item"> 83 <input type="checkbox" name="agreement" lay-skin="primary" 84 title="同意用户协议" checked> 85 </div> 86 <div class="layui-form-item"> 87 <button class="layui-btn layui-btn-fluid" lay-submit 88 lay-filter="LAY-user-reg-submit">注 册</button> 89 </div> 90 <div class="layui-trans layui-form-item layadmin-user-login-other"> 91 <a href="index.html" 92 class="layadmin-user-jump-change layadmin-link layui-hide-xs">用已有帐号登入</a> 93 <a href="index.html" 94 class="layadmin-user-jump-change layadmin-link layui-hide-sm layui-show-xs-inline-block">登入</a> 95 </div> 96 </div> 97 </div> 98 </div> 99 </form> 100 </body> 101 </html>
Admin.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>系统管理员功能页</title> 6 <link rel="stylesheet" href=".//layui/css/layui.css" media="all"> 7 <script src=".//layui/layui.all.js"></script> 8 <script src=".//layui/layui.js"></script> 9 <script type="text/javascript"> 10 //JavaScript代码区域 11 layui.use('element', function() { 12 var element = layui.element; 13 }); 14 </script> 15 </head> 16 <body class="layui-layout-body"> 17 18 <div class="layui-layout layui-layout-admin"> 19 <div class="layui-header"> 20 <div class="layui-logo">管理员功能页</div> 21 <!-- 水平导航 --> 22 <ul class="layui-nav layui-layout-right"> 23 <li class="layui-nav-item "><a href="index.html">退出</a></li> 24 </ul> 25 </div> 26 27 <div class="layui-side layui-bg-black"> 28 <div class="layui-side-scroll"> 29 <!-- 左侧导航 --> 30 <ul class="layui-nav layui-nav-tree"> 31 <li class="layui-nav-item"><a href="Admin_Create_Test_Information.html" target="frame">创建信息</a></li> 32 <li class="layui-nav-item"><a href="Admin_Grade_Data.html" target="frame">成绩数据</a></li> 33 </ul> 34 </div> 35 </div> 36 <div class="layui-body"> 37 <!-- 内容主体区域 --> 38 <iframe name="frame" width="100%" height="100%" 39 style="border: 1px solid #CCC;"></iframe> 40 </div> 41 <div> 42 <div> 43 <input type="text" id="date" /> 44 </div> 45 </div> 46 </div> 47 48 </body> 49 </html>
Teacher.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>教师功能页</title> 6 <link rel="stylesheet" href=".//layui/css/layui.css" media="all"> 7 <script src=".//layui/layui.all.js"></script> 8 <script src=".//layui/layui.js"></script> 9 <script type="text/javascript"> 10 //JavaScript代码区域 11 layui.use('element', function() { 12 var element = layui.element; 13 }); 14 </script> 15 </head> 16 <body class="layui-layout-body"> 17 18 <div class="layui-layout layui-layout-admin"> 19 <div class="layui-header"> 20 <div class="layui-logo">教师功能页</div> 21 <!-- 水平导航 --> 22 <ul class="layui-nav layui-layout-right"> 23 <li class="layui-nav-item "><a href="index.html">退出</a></li> 24 </ul> 25 </div> 26 27 <div class="layui-side layui-bg-black"> 28 <div class="layui-side-scroll"> 29 <!-- 左侧导航 --> 30 <ul class="layui-nav layui-nav-tree"> 31 <li class="layui-nav-item"><a href="Teacher_Test_Setting.html" 32 target="frame">考试设置</a></li> 33 <li class="layui-nav-item"><a href="Teacher_Report_Card.html" 34 target="frame">成绩单</a></li> 35 </ul> 36 </div> 37 </div> 38 <div class="layui-body"> 39 <!-- 内容主体区域 --> 40 <iframe name="frame" width="100%" height="100%" 41 style="border: 1px solid #CCC;"></iframe> 42 </div> 43 <div> 44 <div> 45 <input type="text" id="date" /> 46 </div> 47 </div> 48 </div> 49 50 </body> 51 </html>
Student.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>学生功能页</title> 6 <link rel="stylesheet" href=".//layui/css/layui.css" media="all"> 7 <script src=".//layui/layui.all.js"></script> 8 <script src=".//layui/layui.js"></script> 9 <script type="text/javascript"> 10 //JavaScript代码区域 11 layui.use('element', function() { 12 var element = layui.element; 13 }); 14 </script> 15 </head> 16 <body class="layui-layout-body"> 17 18 <div class="layui-layout layui-layout-admin"> 19 <div class="layui-header"> 20 <div class="layui-logo">学生功能页</div> 21 <!-- 水平导航 --> 22 <ul class="layui-nav layui-layout-right"> 23 <li class="layui-nav-item "><a href="index.html">退出</a></li> 24 </ul> 25 </div> 26 27 <div class="layui-side layui-bg-black"> 28 <div class="layui-side-scroll"> 29 <!-- 左侧导航 --> 30 <ul class="layui-nav layui-nav-tree"> 31 <li class="layui-nav-item"><a href="Student_Show.html" target="frame">考试说明及题目</a></li> 32 <li class="layui-nav-item"><a href="Student_Grade.html" target="frame">成绩报告</a></li> 33 </ul> 34 </div> 35 </div> 36 <div class="layui-body"> 37 <!-- 内容主体区域 --> 38 <iframe name="frame" width="100%" height="100%" 39 style="border: 1px solid #CCC;"></iframe> 40 </div> 41 <div> 42 <div> 43 <input type="text" id="date" /> 44 </div> 45 </div> 46 </div> 47 48 </body> 49 </html>
Admin_Create_Test_Information.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>创建考试基础信息</title> 6 </head> 7 <link rel="stylesheet" href=".//layui/css/layui.css" media="all"> 8 <script src=".//layui/layui.all.js"></script> 9 <script src=".//layui/layui.js"></script> 10 <body> 11 <form class="layui-form" action=""> 12 <div class="layui-form-item"> 13 <label class="layui-form-label">专业方向</label> 14 <div class="layui-input-block"> 15 <input type="text" name="professional_emphasis" required lay-verify="required" 16 placeholder="请输入专业方向" autocomplete="off" class="layui-input"> 17 </div> 18 </div> 19 <div class="layui-form-item"> 20 <label class="layui-form-label">课程编号</label> 21 <div class="layui-input-block"> 22 <input type="text" name="course_number" required lay-verify="required" 23 placeholder="请输入课程编号" autocomplete="off" class="layui-input"> 24 </div> 25 </div> 26 <div class="layui-form-item layui-form-text"> 27 <label class="layui-form-label">任课教师</label> 28 <div class="layui-input-block"> 29 <input type="text" name="course_teacher" required lay-verify="required" 30 placeholder="请输入任课教师" autocomplete="off" class="layui-input"> 31 </div> 32 </div> 33 <div class="layui-form-item"> 34 <div class="layui-input-block"> 35 <button class="layui-btn" lay-submit>立即创建</button> 36 <button type="reset" class="layui-btn layui-btn-primary">重置</button> 37 </div> 38 </div> 39 </form> 40 </body> 41 </html>
Admin_Grade_Data.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>成绩报告数据</title> 6 </head> 7 <link rel="stylesheet" href=".//layui/css/layui.css" media="all"> 8 <script src=".//layui/layui.all.js"></script> 9 <script src=".//layui/layui.js"></script> 10 <body> 11 <table class="layui-table"> 12 <thead> 13 <tr> 14 <th>id</th> 15 <th>课程名称</th> 16 <th>学分</th> 17 <th>及格率</th> 18 <th>操作</th> 19 </tr> 20 </thead> 21 <tbody> 22 <tr> 23 <td>1</td> 24 <td>高等数学</td> 25 <td>4</td> 26 <td>83%</td> 27 <td> 28 <button class="layui-btn layui-btn-normal" 29 onclick="window.location.href='Admin.html'">发送给教师</button> 30 <button class="layui-btn layui-btn-normal" 31 onclick="window.location.href='Teacher.html'">发送给学生</button> 32 </td> 33 </tr> 34 <tr> 35 <td>2</td> 36 <td>软件需求分析</td> 37 <td>3</td> 38 <td>89%</td> 39 <td> 40 <button class="layui-btn layui-btn-normal" 41 onclick="window.location.href='Admin.html'">发送给教师</button> 42 <button class="layui-btn layui-btn-normal" 43 onclick="window.location.href='Teacher.html'">发送给学生</button> 44 </td> 45 </tr> 46 </tbody> 47 </table> 48 </body> 49 </html>
Teacher_Report_Card.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>成绩单</title> 6 <link rel="stylesheet" href=".//layui/css/layui.css" media="all"> 7 <script src=".//layui/layui.all.js"></script> 8 <script src=".//layui/layui.js"></script> 9 </head> 10 <body> 11 <form class="layui-form" action="UserServlet?method=Chaxun" 12 method="post"> 13 <div class="layui-form-item"> 14 <div class="layui-inline"> 15 <input type="text" name="course_name" required lay-verify="required" 16 placeholder="请输入课程名称" autocomplete="off" class="layui-input"> 17 </div> 18 <div class="layui-inline"> 19 <button class="layui-btn" lay-submit>查询</button> 20 </div> 21 </div> 22 </form> 23 <table class="layui-table"> 24 <colgroup> 25 <col width="150"> 26 <col width="200"> 27 <col> 28 </colgroup> 29 <thead> 30 <tr> 31 <th>id</th> 32 <th>课程名称</th> 33 <th>学号</th> 34 <th>成绩</th> 35 </tr> 36 </thead> 37 <tbody> 38 <tr> 39 <td>1</td> 40 <td>高等数学</td> 41 <td>20190000</td> 42 <td>83</td> 43 </tr> 44 <tr> 45 <td>2</td> 46 <td>高等数学</td> 47 <td>20190001</td> 48 <td>89</td> 49 </tr> 50 </tbody> 51 </table> 52 </body> 53 </html>
Teacher_Test_Setting.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>考试设置</title> 6 </head> 7 <link rel="stylesheet" href=".//layui/css/layui.css" media="all"> 8 <script src=".//layui/layui.all.js"></script> 9 <script src=".//layui/layui.js"></script> 10 <body> 11 <form class="layui-form" action=""> 12 <div class="layui-form-item"> 13 <label class="layui-form-label">试题题目</label> 14 <div class="layui-input-block"> 15 <input type="text" name="title" required lay-verify="required" 16 placeholder="请输入试题题目" autocomplete="off" class="layui-input"> 17 </div> 18 </div> 19 <div class="layui-form-item"> 20 <label class="layui-form-label">试题答案</label> 21 <div class="layui-input-block"> 22 <input type="text" name="answer" required lay-verify="required" 23 placeholder="请输入试题答案" autocomplete="off" class="layui-input"> 24 </div> 25 </div> 26 <div class="layui-form-item layui-form-text"> 27 <label class="layui-form-label">考试说明</label> 28 <div class="layui-input-block"> 29 <textarea name="instruction" placeholder="请输入考试说明" 30 class="layui-textarea"></textarea> 31 </div> 32 </div> 33 <div class="layui-form-item layui-form-text"> 34 <label class="layui-form-label">考试时间</label> 35 <div class="layui-inline"> 36 <!-- 注意：这一层元素并不是必须的 --> 37 <input type="text" name="test_time" class="layui-input" id="test1"> 38 </div> 39 </div> 40 <div class="layui-form-item layui-form-text"> 41 <label class="layui-form-label">提醒时间</label> 42 <div class="layui-inline"> 43 <!-- 注意：这一层元素并不是必须的 --> 44 <input type="text" name="remind_time" class="layui-input" id="test1"> 45 </div> 46 </div> 47 <div class="layui-form-item"> 48 <label class="layui-form-label">录入学生信息</label> 49 <div class="layui-input-block"> 50 <button class="layui-btn layui-btn-normal" id="student_information">点击录入学生信息</button> 51 </div> 52 </div> 53 <div class="layui-form-item"> 54 <div class="layui-input-block"> 55 <button class="layui-btn" lay-submit>立即提交</button> 56 <button type="reset" class="layui-btn layui-btn-primary">重置</button> 57 </div> 58 </div> 59 </form> 60 <script> 61 layui.use('laydate', function() { 62 var laydate = layui.laydate; 63 64 //执行一个laydate实例 65 laydate.render({ 66 elem : '#test1' //指定元素 67 }); 68 }); 69 </script> 70 </body> 71 </html>
Student_Grade.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>成绩报告</title> 6 </head> 7 <link rel="stylesheet" href=".//layui/css/layui.css" media="all"> 8 <script src=".//layui/layui.all.js"></script> 9 <script src=".//layui/layui.js"></script> 10 <body> 11 <table class="layui-table"> 12 <colgroup> 13 <col width="150"> 14 <col width="200"> 15 <col> 16 </colgroup> 17 <thead> 18 <tr> 19 <th>id</th> 20 <th>课程名称</th> 21 <th>学分</th> 22 <th>成绩</th> 23 </tr> 24 </thead> 25 <tbody> 26 <tr> 27 <td>1</td> 28 <td>高等数学</td> 29 <td>4</td> 30 <td>83</td> 31 </tr> 32 <tr> 33 <td>2</td> 34 <td>软件需求分析</td> 35 <td>3</td> 36 <td>89</td> 37 </tr> 38 </tbody> 39 </table> 40 </body> 41 </html>
Student_Show.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>考试题目</title> 6 </head> 7 <link rel="stylesheet" href=".//layui/css/layui.css" media="all"> 8 <script src=".//layui/layui.all.js"></script> 9 <script src=".//layui/layui.js"></script> 10 <body> 11 <form class="layui-form" action=""> 12 <div class="layui-col-md9 site-content"> 13 <blockquote class="layui-elem-quote">考试说明</blockquote> 14 </div> 15 <hr class="layui-border-green"> 16 <div class="layui-form-item"> 17 <label class="layui-form-label">题目1</label> 18 <div class="layui-input-block"> 19 <textarea name="subject1" placeholder="请输入答案" class="layui-textarea"></textarea> 20 </div> 21 </div> 22 <div class="layui-form-item"> 23 <label class="layui-form-label">题目2</label> 24 <div class="layui-input-block"> 25 <textarea name="subject2" placeholder="请输入答案" class="layui-textarea"></textarea> 26 </div> 27 </div> 28 <div class="layui-form-item"> 29 <label class="layui-form-label">题目3</label> 30 <div class="layui-input-block"> 31 <textarea name="subject3" placeholder="请输入答案" class="layui-textarea"></textarea> 32 </div> 33 </div> 34 <div class="layui-form-item"> 35 <div class="layui-input-block"> 36 <button class="layui-btn" lay-submit>提交</button> 37 <button type="reset" class="layui-btn layui-btn-primary">重置</button> 38 </div> 39 </div> 40 </form> 41 </body> 42 </html>
