ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-09-29 20:33:51  阅读:147  来源: 互联网

标签:25 26 20 21 22 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>

 

标签:25,26,20,21,22,23,layui,Demo
来源: https://www.cnblogs.com/miao-com/p/15352035.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有