每日日报23——layui构建考试系统小Demo

一、题目

题目如下,仅构建考试系统的前端界面,无需后台实现。

每日日报23——layui构建考试系统小Demo

二、上下文图

每日日报23——layui构建考试系统小Demo

三、效果

每日日报23——layui构建考试系统小Demo

四、工程目录

每日日报23——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>

 

上一篇:实战:第十七章:xlsx文件导入数据入库


下一篇:Java项目:汽车租凭管理系统(java+SSM+mysql+maven+Layui)