zoukankan html css js c++ java

《小学生四则运算题卡》—— —— 毛锦媛

1.需求分析

根据选择的题型，显示对应的题型10道，可答题，做完后显示正确答案，还可查看自己的错题。

分析出需要实现以下功能：

1）出题

给出一组（10个）100以内正整数的加减乘除算式。

2）答题

界面显示10个题，作答，点击“开始答题”，显示后开始计时。

3）统计

显示正确答案，用时，正确率

2.设计

数据库：

具体设计思想：

1.经过分析，将会有注册页面和登录页面，让小学生进行注册、登录，所以要创建数据库，保存用户的信息，成绩可以通过学生ID查询学生成绩。

2.student表：账号ID，账号，密码

3.grade表：成绩ID，学生账号ID，难度，成绩，使用的时间（秒），日期及时间。

//1.给grade表添加外键

alter table grade add constraint fk_student_grade foreign key(stuID) references student(sid);

Maven：

项目结构：

使用json来实现注册和登录
使用MyBatis+Spring来实现对数据库的访问。
重点页面：出题页面

要完成的功能：

　　　　1. 定时器从打开页面开始计时 OK

　　　　2. 获取select框里选的值 OK

　　　　3. 根据选的值显示相应的题目 Ok

　　　　4.点击提交按钮，会显示得分信息。(暂未实现）

　　　　 5.点击退出按钮，会回到首页 Ok

3.编码

dao层(3个)

1 package cn.hnzj.dao;
2 
3 import cn.hnzj.entity.Student;
4 
5 public interface RegisterDao {
6     public void insertStu(Student s);    //插入学生
7     
8 }

1 package cn.hnzj.dao;
2 
3 import cn.hnzj.entity.Student;
4 
5 public interface LoginDao {
6     public Student findByStuName(String name);
7 }

 1 package cn.hnzj.dao;
 2 
 3 import java.sql.Date;
 4 
 5 import cn.hnzj.entity.Grade;
 6 
 7 public interface GradeDao {
 8     public void insertGrade(Grade g);   //插入成绩
 9     public Grade findByTime(Date t);    //根据日期查找对应的成绩信息
10 }

entity类（3个）

 1 package cn.hnzj.entity;
 2 /**
 3  * Student实体类
 4  * @author Asus
 5  *
 6  */
 7 public class Student {
 8     private int sid;    //账号ID
 9     private String name;   //名字
10     private String pwd;    //密码
11     public int getSid() {
12         return sid;
13     }
14     public void setSid(int sid) {
15         this.sid = sid;
16     }
17     public String getName() {
18         return name;
19     }
20     public void setName(String name) {
21         this.name = name;
22     }
23     public String getPwd() {
24         return pwd;
25     }
26     public void setPwd(String pwd) {
27         this.pwd = pwd;
28     }
29     @Override
30     public String toString() {
31         return "Student [sid=" + sid + ", name=" + name + ", pwd=" + pwd + "]";
32     }
33     
34     
35 
36 }

 1 package cn.hnzj.entity;
 2 /**
 3  * Grade成绩类
 4 
 5  * @author Asus
 6  *
 7  */
 8 
 9 import java.text.SimpleDateFormat;
10 import java.util.Date;
11 
12 public class Grade {
13      private int gid;
14      private Integer stuID;
15      private String step;
16      private int score;
17      private int used;
18      private Date time;
19     
20     
21     public int getGid() {
22         return gid;
23     }
24 
25 
26     public void setGid(int gid) {
27         this.gid = gid;
28     }
29 
30 
31     public Integer getStuID() {
32         return stuID;
33     }
34 
35 
36     public void setStuID(Integer stuID) {
37         this.stuID = stuID;
38     }
39 
40 
41     public String getStep() {
42         return step;
43     }
44 
45 
46     public void setStep(String step) {
47         this.step = step;
48     }
49 
50 
51     public int getScore() {
52         return score;
53     }
54 
55 
56     public void setScore(int score) {
57         this.score = score;
58     }
59 
60 
61     public int getUsed() {
62         return used;
63     }
64 
65 
66     public void setUsed(int used) {
67         this.used = used;
68     }
69 
70 
71     public Date getTime() {
72         return time;
73     }
74 
75 
76     public void setTime(Date time) {
77         this.time = time;
78     }
79 
80 
81     @Override
82     public String toString() {
83         //对时间进行格式化输出
84         String realTime = new SimpleDateFormat("yyyy-MM-dd").format(time);
85         return "Grade [gid=" + gid + ", stuID=" + stuID + ", step=" + step + ", score=" + score + ", used=" + used
86                 + ", time=" + realTime + "]";
87     }
88     
89      
90 }

 1 package cn.hnzj.entity;
 2 
 3 public class JsonResult<T> {
 4     private int status;   //状态码
 5     private String msg;   //错误信息
 6     private T data;
 7     
 8     public int getStatus() {
 9         return status;
10     }
11     public void setStatus(int status) {
12         this.status = status;
13     }
14     public String getMsg() {
15         return msg;
16     }
17     public void setMsg(String msg) {
18         this.msg = msg;
19     }
20     public T getData() {
21         return data;
22     }
23     public void setData(T data) {
24         this.data = data;
25     }
26     @Override
27     public String toString() {
28         return "JsonResult [status=" + status + ", msg=" + msg + ", data=" + data + "]";
29     }
30     
31     
32 
33 }

Subject类：

 1 package cn.hnzj.game;
 2 
 3 import java.util.ArrayList;
 4 
 5 import java.util.List;
 6 
 7 import cn.hnzj.utils.*;
 8 
 9 /**
10  * 习题类 定义了生成习题的方法
11  * 
12  * @author Asus
13  *
14  */
15 public class Subject {
16     private static String[] fu = { "+", "-", "*", "/" };
17 
18     /**
19      * 功能1. 根据传入的个数来生成题目
20      * 
21      * @param List<String>
22      */
23     public List<String> AllTwo_1_Examp(int count) {
24         List<String> examList = new ArrayList<String>();
25         for (int i = 0; i < count; i++) {
26             String create = Ti.two_1();
27             examList.add(create);
28         }
29         return examList;
30     }
31     
32     public List<String> AllTwo_2_Examp(int count) {
33         List<String> examList = new ArrayList<String>();
34         for (int i = 0; i < count; i++) {
35             String create = Ti.two_2();
36             examList.add(create);
37         }
38         return examList;
39     }
40 
41     public List<String> AllThree_Examp(int count) {
42         List<String> examList = new ArrayList<String>();
43         for (int i = 0; i < count; i++) {
44             String create = Ti.three();
45             examList.add(create);
46         }
47         return examList;
48     }
49     
50     /**
51      * 功能2.对生成的题目进行运算
52      * 
53      * @return List<String>
54      */
55 
56     public List<String> result(List<String> list) {
57         // 1. 创建用于保存答案的集合
58         List<String> resultList = new ArrayList<String>();
59         // 2. 调用方法遍历集合中的每个式子进行计算，并将计算出来的结果存进集合
60         for (String s : list) {
61             //因为生成的式子含有=,脚本不能对含有等号的式子计算，所以要把等号截掉
62             String newStr = s.substring(0, s.length() - 1);     
63             String d = SubjectUtils.count(newStr);
64             resultList.add(d);
65         }
66         return resultList;
67     }
68 
69 }

utils（四个）

 1 package cn.hnzj.utils;
 2 import java.util.Random;
 3 import javax.script.ScriptEngine;
 4 import javax.script.ScriptEngineManager;
 5 import javax.script.ScriptException;
 6 
 7 /**
 8  * Subject类所用的工具类
 9  * 
10  * @author Asus
11  *
12  */
13 public class SubjectUtils {
14     private static String[] fu1= {"+", "-"};
15     private static String[]  fu2={"*", "/"};
16       private static String[] fu3 = { "+", "-", "*", "/" };
17 
18     // 方法一：随机产生运算符
19     public static String createFu(String[] fu) {
20         int len=fu.length;
21         Random random = new Random();
22         int index = random.nextInt(len);
23         return fu[index];
24     }
25     // 方法三：  随机产生整数
26     public static int createNum() {
27         // 1. 创建随机数对象
28         Random ran = new Random();
29         // 2. 调用方法生成1~100之间的整数
30         int num=ran.nextInt(100)+1;
31         return num;
32     }
33 
34     // 方法四：对生成的题目进行计算，并以字符串的结果进行返回
35     public static String count(String s) {
36         ScriptEngine jse = new ScriptEngineManager().getEngineByName("JavaScript");
37         Object o_res;
38         String res = null;
39         try {
40             o_res = jse.eval(s);
41             String string = o_res.toString();
42             if (string.equals(".")) {
43                 int parseInt = Integer.parseInt(string);
44                 String valueOf = String.valueOf(parseInt);
45                 res=valueOf;
46                 return res;
47                 } 
48             res=string;
49         } catch (ScriptException e1) {
50             e1.printStackTrace();
51         }
52         return res;
53     }
54 
55 }

 1 package cn.hnzj.utils;
 2 /**
 3  * 1. 定义减法、除法，方便式子的合理性
 4  * 如果式子不合理，将重新生成
 5  * @author Asus
 6  *
 7  */
 8 public class CommonUtils {
 9      public static boolean jian(int n1,int n2) {
10          boolean flag=true;
11          if(n1-n2 < 0) {
12              return false;
13          }
14          return flag;
15      }
16      
17      public static boolean devide(int n1,int n2) {
18          boolean flag=true;
19          if(n1/n2 == 0) {
20              return false;
21          }
22          return flag;
23      }
24      
25      
26 }

 1 package cn.hnzj.utils;
 2 /**
 3  * 生成小学生选择生成的题型
 4  * @author Asus
 5  *
 6  */
 7 public class Ti {
 8     private static String[] fu1= {"+", "-"};
 9     private static String[]  fu2={"*", "/"};
10       private static String[] fu3 = { "+", "-", "*", "/" };
11    //第一大类
12      public static String two_1() {
13          String ti=" ";
14          // 1. 数字
15          int first = SubjectUtils.createNum();
16          int second=SubjectUtils.createNum();
17          // 2. 符号
18          String createFu = SubjectUtils.createFu(fu1);
19          // 3.生成
20          if(createFu.equals("-")) {
21              while(!CommonUtils.jian(first, second)) {
22                  first=SubjectUtils.createNum();
23              }
24          }
25          ti=first+createFu+second+"=";
26          
27          return ti;
28      }
29      public static String two_2() {
30          String ti=" ";
31          // 1. 数字
32          int first = SubjectUtils.createNum();
33          int second=SubjectUtils.createNum();
34          // 2. 符号
35          String createFu = SubjectUtils.createFu(fu2);
36          // 3.生成
37          if(createFu.equals("/")) {
38              while(!CommonUtils.devide(first, second)) {
39                  first=SubjectUtils.createNum();
40              }
41          }
42          ti=first+createFu+second+"=";
43          
44          return ti;
45      }
46   // 第二大类
47     public static String three() {
48         String ti=" ";
49          // 1. 数字
50          int first = SubjectUtils.createNum();
51          int second=SubjectUtils.createNum();
52          int third=SubjectUtils.createNum();
53          // 2. 符号
54          String createFu = SubjectUtils.createFu(fu3);
55          String createFu2 = SubjectUtils.createFu(fu3);
56          // 3.生成
57          if(createFu.equals("/") ) {
58              while(!CommonUtils.devide(first, second)) {
59                  first=SubjectUtils.createNum();
60              }
61              if(createFu2.equals("/")) {
62                  while(!CommonUtils.devide(first+second, third)) {
63                       third=SubjectUtils.createNum();
64                   }
65              }
66              if(createFu2.equals("-")) {
67                  while(!CommonUtils.jian(first+second, third)) {
68                       third=SubjectUtils.createNum();
69                   }
70              }
71              
72          }
73          if(createFu.equals("-") ) {
74              while(!CommonUtils.jian(first, second)) {
75                  first=SubjectUtils.createNum();
76              }
77              if(createFu2.equals("/")) {
78                  while(!CommonUtils.devide(first+second, third)) {
79                       third=SubjectUtils.createNum();
80                   }
81              }
82              if(createFu2.equals("-")) {
83                  while(!CommonUtils.jian(first+second, third)) {
84                       third=SubjectUtils.createNum();
85                   }
86              }
87              
88          }
89          ti=first+createFu+second+createFu2+third+"=";
90          
91          return ti;
92         
93     }
94 
95 }

 1 package cn.hnzj.utils;
 2 
 3 import java.util.List;
 4 
 5 /**
 6  * main测试所用的工具类
 7  * 
 8  * @author Asus
 9  *
10  */
11 public class Utils {
12     /**
13      *功能 1 ： 根据用户输入的数，创建对应长度的数组
14      */
15     public static String[] retrunArray(int length) {
16         return new String[length];
17     }
18 
19     /**
20      * 功能2： 根据用户传入的答案数组，遍历输出
21      */
22     public static void showArrayElement(String[] userArray) {
23         System.out.print("[  ");
24         for (int i = 0; i < userArray.length; i++) {
25             System.out.print(userArray[i]);
26             System.out.print(",");
27         }
28         System.out.print("  ]");
29     }
30 
31     /**
32      * 功能3 ： 遍历集合中的数据
33      */
34     public static void showList(List<String> userList) {
35         for (String s : userList) {
36             System.out.println(s);
37         }
38     }
39 }

Services（3个）

 1 package cn.hnzj.service;
 2 
 3 import javax.annotation.Resource;
 4 import org.springframework.stereotype.Service;
 5 
 6 import cn.hnzj.dao.RegisterDao;
 7 import cn.hnzj.entity.Student;
 8 
 9 @Service
10 public class RegisterService {
11     @Resource
12     private RegisterDao dao;
13     
14     public void insertStu(Student s) {
15         dao.insertStu(s);
16     }
17 }

 1 package cn.hnzj.service;
 2 
 3 import javax.annotation.Resource;
 4 import org.springframework.stereotype.Service;
 5 
 6 import cn.hnzj.dao.LoginDao;
 7 
 8 import cn.hnzj.entity.Student;
 9 
10 @Service
11 public class LoginService {
12     @Resource
13    private LoginDao dao;
14    
15     public Student findStudentByName(String name) {
16         Student stu = dao.findByStuName(name);
17         return stu;
18     }
19 }

 1 package cn.hnzj.service;
 2 
 3 import java.sql.Date;
 4 
 5 import javax.annotation.Resource;
 6 
 7 import org.springframework.stereotype.Service;
 8 
 9 import cn.hnzj.dao.GradeDao;
10 import cn.hnzj.entity.Grade;
11 
12 @Service
13 public class GradeService {
14     @Resource
15     private GradeDao dao;
16     
17     public void insertGrade(Grade g) {
18         dao.insertGrade(g);
19     }
20     
21     public Grade findGradeByTime(Date d) {
22         Grade findByTime = dao.findByTime(d);
23         return findByTime;
24     }
25 }

controller(4个)

 1 package cn.hnzj.controller;
 2 
 3 import java.sql.Date;
 4 import javax.annotation.Resource;
 5 
 6 import org.springframework.stereotype.Controller;
 7 import org.springframework.web.bind.annotation.RequestMapping;
 8 import org.springframework.web.bind.annotation.ResponseBody;
 9 
10 import cn.hnzj.entity.Grade;
11 import cn.hnzj.entity.JsonResult;
12 import cn.hnzj.service.GradeService;
13 
14 @Controller
15 public class GradeController {
16    @Resource
17    private GradeService service;
18    
19    @RequestMapping("/insertGrade.do")
20    public void insert(Integer stuID,String step,int score,int used,Date time) {
21        Grade grade = new Grade();
22        grade.setStuID(stuID);
23        grade.setStep(step);
24        grade.setScore(score);
25        grade.setUsed(used);
26        grade.setTime(time);
27        service.insertGrade(grade);
28    }
29    
30    @RequestMapping("/findGrade.do")
31    @ResponseBody
32    public JsonResult<Grade> findGradeByTime(Date time){
33        JsonResult<Grade> result = new JsonResult<Grade>();
34        Grade g = service.findGradeByTime(time);
35        if(g == null) {
36            result.setStatus(1);
37            result.setMsg("没有查找指定日期的成绩哦");
38        }
39        result.setStatus(0);
40        result.setData(g);
41        return result;
42    }
43 }

 1 package cn.hnzj.controller;
 2 
 3 import java.util.List;
 4 
 5 import javax.annotation.Resource;
 6 
 7 import org.springframework.stereotype.Controller;
 8 import org.springframework.web.bind.annotation.RequestMapping;
 9 import org.springframework.web.bind.annotation.ResponseBody;
10 
11 import cn.hnzj.game.Subject;
12 
13 @Controller
14 public class JsonController {
15     @Resource(name="utils")
16     private Subject utils;
17     
18     @RequestMapping("/json1.do")
19     @ResponseBody
20     public  List<String> toJson1(){
21         List<String> result = utils.AllTwo_1_Examp(10);
22         return result;
23     }
24     
25     @RequestMapping("/json2.do")
26     @ResponseBody
27     public  List<String> toJson2(){
28         List<String> result = utils.AllTwo_2_Examp(10);
29         return result;
30     }
31     
32     @RequestMapping("/json3.do")
33     @ResponseBody
34     public  List<String> toJson3(){
35         List<String> result = utils.AllThree_Examp(10);
36         return result;
37     }
38     
39     
40 }

 1 package cn.hnzj.controller;
 2 import javax.annotation.Resource;
 3 import org.springframework.stereotype.Controller;
 4 import org.springframework.web.bind.annotation.RequestMapping;
 5 import org.springframework.web.bind.annotation.ResponseBody;
 6 import cn.hnzj.entity.JsonResult;
 7 import cn.hnzj.entity.Student;
 8 import cn.hnzj.service.LoginService;
 9 
10 @Controller
11 public class LoginController {
12     @Resource
13     private LoginService service;
14     
15     @RequestMapping("/login.do")
16     @ResponseBody
17     public JsonResult<Student> toLoginStu(String name,String pwd){
18         // 1. 创建jsonResult对象
19         JsonResult<Student> result = new JsonResult<Student>();
20         Student s = service.findStudentByName(name);
21         if(s == null) {   //说明没有该用户
22             result.setStatus(1);
23             result.setMsg("用户不存在!");
24             return result;
25         }
26         if(!pwd.equals(s.getPwd())) {   //密码错误
27             result.setStatus(2);
28             result.setMsg("密码错误!");
29             return result;
30         }
31         //说明可以登录
32         result.setStatus(0);
33         result.setData(s);
34         return result;
35     }
36 
37 }

 1 package cn.hnzj.controller;
 2 import javax.annotation.Resource;
 3 import javax.servlet.http.HttpServletRequest;
 4 import javax.servlet.http.HttpServletResponse;
 5 
 6 import org.springframework.stereotype.Controller;
 7 import org.springframework.web.bind.annotation.RequestMapping;
 8 import org.springframework.web.bind.annotation.ResponseBody;
 9 
10 import cn.hnzj.entity.JsonResult;
11 import cn.hnzj.entity.Student;
12 import cn.hnzj.service.RegisterService;
13 
14 @Controller
15 public class RegisterController {
16     @Resource
17    private RegisterService service;
18    
19    @RequestMapping("/toRegStu.do")
20    @ResponseBody
21    public JsonResult<Student> addStu(String name,String pwd,HttpServletRequest req) throws Exception{
22        req.setCharacterEncoding("utf-8");
23        
24        // 1. 创建JsonResult对象
25        JsonResult<Student> result = new JsonResult<Student>();
26         Student s = new Student();
27         s.setName(name);
28         s.setPwd(pwd);
29         // 2.封装数据
30        service.insertStu(s);
31        result.setStatus(0);
32        result.setData(s);
33        return result;
34    }
35    
36 }

HTML部分（7个页面）

  1 <%@ page language="java" contentType="text/html; charset=UTF-8"
  2     pageEncoding="UTF-8"%>
  3 <!DOCTYPE html>
  4  <html lang="en">
  5  
  6 <head>
  7    <meta charset="UTF-8">
  8 <title>register</title>
  9  <style>
 10 * {
 11            margin: 0;
 12            padding: 0;
 13         }
 14           html {
 15                 height: 100%;
 16               width: 100%;
 17              overflow: hidden;
 18               margin: 0;
 19              padding: 0;
 20              background: url(images/Desert.jpg) no-repeat 0px 0px;
 21               background-repeat: no-repeat;
 22               background-size: 100% 100%;
 23               -moz-background-size: 100% 100%;
 24          }
 25           
 26           body {
 27              display: flex;
 28               align-items: center;
 29              justify-content: center;
 30               height: 100%;
 31           }
 32           
 33           #loginDiv {
 34               width: 37%;
 35               display: flex;
 36               justify-content: center;
 37               align-items: center;
 38               height: 650px;
 39               background-color: rgba(75, 81, 95, 0.3);
 40               box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
 41              border-radius: 5px;
 42           }
 43           
 44           #name_trip {
 45               margin-left: 50px;
 46               color: red;
 47         }
 48           
 49          p, .sexDiv {
 50               margin-top: 10px;
 51              margin-left: 20px;
 52               color: azure;
 53           }
 54           
 55           .sexDiv>input,
 56           .hobby>input {
 57               width: 30px;
 58               height: 17px;
 59           }
 60           
 61           input,
 62           select {
 63               margin-left: 15px;
 64              border-radius: 5px;
 65               border-style: hidden;
 66               height: 30px;
 67               width: 140px;
 68               background-color: rgba(216, 191, 216, 0.5);
 69               outline: none;
 70               color: black;
 71               padding-left: 10px;
 72           }
 73           
 74           .button {
 75               border-color: cornsilk;
 76               background-color: rgba(100, 149, 237, .7);
 77               color: aliceblue;
 78               border-style: hidden;
 79               border-radius: 5px;
 80               width: 100px;
 81               height: 31px;
 82               font-size: 16px;
 83           }
 84           
 85           h1 {
 86               text-align: center;
 87               margin-bottom: 20px;
 88               margin-top: 20px;
 89              color: #f0edf3;
 90          }
 91          
 92          b {
 93              margin-left: 50px;
 94              color: #FFEB3B;
 95              font-size: 10px;
 96              font-weight: initial;
 97          }
 98     </style>
 99  </head>
100  
101  <body>
102     <div id="loginDiv">
103          <form action="toRegStu.do">
104             <h1>REGESTER</h1>
105              <p>用户姓名:<input name="name" type="text"/> </p>
106             <p>用户密码:<input name="pwd" type="password"/></p>
107 
108             <p>确认密码:<input id="surePassword" type="password"/></p>
109 
110             <p>
111                年级:
112                 <select name="type" id="userType">
113                    <option value="0">--请选择--</option>
114                      <option value="1">一年级</option>
115                     <option value="2">二年级</option>
116                     <option value="2">三年级</option>
117                     <option value="2">四年级</option>
118                     <option value="2">五年级</option>
119                     <option value="2">六年级</option>
120                 </select>
121              </p>
122 
123 
124             <p style="text-align: center;">
125                <input type="submit" class="button"  value="提交">
126                  <input type="reset" class="button" value="重置">
127              </p>
128          </form>
129     </div>
130  
131  </body>
132  </html>

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html>
 4 <html lang="en">
 5  
 6 <head>
 7     <meta charset="UTF-8">
 8     <title>login</title>
 9     <style>
10         * {
11             margin: 0;
12             padding: 0;
13         }
14          
15         html {
16             height: 100%;
17             width: 100%;
18             overflow: hidden;
19             margin: 0;
20             padding: 0;
21             background: url(images/Desert.jpg) no-repeat 0px 0px;
22             background-repeat: no-repeat;
23             background-size: 100% 100%;
24             -moz-background-size: 100% 100%;
25         }
26          
27         body {
28             display: flex;
29             align-items: center;
30             justify-content: center;
31             height: 100%;
32         }
33          
34         #loginDiv {
35             width: 37%;
36             display: flex;
37             justify-content: center;
38             align-items: center;
39             height: 300px;
40             background-color: rgba(75, 81, 95, 0.3);
41             box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
42             border-radius: 5px;
43         }
44          
45         #name_trip {
46             margin-left: 50px;
47             color: red;
48         }
49          
50         p {
51             margin-top: 30px;
52             margin-left: 20px;
53             color: azure;
54         }
55          
56         input {
57             margin-left: 15px;
58             border-radius: 5px;
59             border-style: hidden;
60             height: 30px;
61             width: 140px;
62             background-color: rgba(216, 191, 216, 0.5);
63             outline: none;
64             color: #f0edf3;
65             padding-left: 10px;
66         }
67          
68         .button {
69             border-color: cornsilk;
70             background-color: rgba(100, 149, 237, .7);
71             color: aliceblue;
72             border-style: hidden;
73             border-radius: 5px;
74             width: 100px;
75             height: 31px;
76             font-size: 16px;
77         }
78     </style>
79     <script type="text/javascript" src="ajax/prcList.js"></script>
80 </head>
81  
82 <body>
83     <div id="loginDiv">
84         <form action="login.do" id="form">
85             <h1 style="text-align: center;color: aliceblue;">登录页面</h1>
86             <p>账号:<input name="name" id="userNname" type="text"><label id="name_trip"></label></p>
87  
88             <p>密码:  <input name="pwd" id="password" type="password"><label id="password_trip"></label></p>
89  
90             <div style="text-align: center;margin-top: 30px;">
91                 <input type="submit" class="button" value="登录" onclick="checkLogin()">
92                 <input type="reset" class="button" value="重置">
93             </div>
94         </form>
95     </div>
96  
97 </body>
98 </html>

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta charset="utf-8">
 7 <title>小学生口算题卡</title>
 8 <!-- 外部导入Css文件，链接式 -->
 9 <link type="text/css" rel="stylesheet" href="css/slideShow.css" />
10 </head>
11 
12 <body>
13     <p>小学生口算题卡APP</p>
14     <div><a href="#">退出登录</a></div>
15     <hr id="hr1" />
16     <!-- 建立一个div控件作为图片框 -->
17     <div class="imgBox">
18         <!-- alt：图片路径失败时替换显示内容 -->
19         <img class="img-slide img" src="images/img1.jpeg" alt="img1"> 
20         <img class="img-slide img" src="images/img2.jpg" alt="img2"> 
21         <img class="img-slide img" src="images/img3.jpg" alt="img3"> 
22         <img class="img-slide img" src="images/img4.jpeg" alt="img4"> 
23         <img class="img-slide img" src="images/img5.jpeg" alt="img5">
24         <img class="img-slide img" src="images/img6.jpeg" alt="img6">
25         <img class="img-slide img" src="images/img7.jpeg" alt="img7">
26     </div>
27 <ul>
28     <li><a href="#">开始答题</a></li>
29     <li><a href="#">错题本</a></li>
30     <li><a href="#">成长小足迹</a></li>
31      
32 </ul>
33 </body>
34 
35 <script type="text/javascript">
36     // index：索引， len：长度
37     var index = 0, len;
38     // 类似获取一个元素数组
39     var imgBox = document.getElementsByClassName("img-slide");
40     len = imgBox.length;
41     imgBox[index].style.display = 'block';
42     // 逻辑控制函数
43     function slideShow() {
44         index++;
45         // 防止数组溢出
46         if (index >= len)
47             index = 0;
48         // 遍历每一个元素
49         for (var i = 0; i < len; i++) {
50             imgBox[i].style.display = 'none';
51         }
52         // 每次只有一张图片显示
53         imgBox[index].style.display = 'block';
54     }
55 
56     // 定时器，间隔3s切换图片
57     setInterval(slideShow, 3000);
58 </script>
59 
60 </html>

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>计时器</title>
 8 <script type="text/javascript">
 9     var usedtime = -1;    //计时已经花费的时间，单位秒
10     var t;//计时器对象
11     function begin(){    //计时开始
12         usedtime = -1;
13         clearTimeout(t);
14         proceed();
15     }
16     function proceed(){    //继续
17         usedtime++;
18         clearTimeout(t);
19         t = setTimeout("proceed()",1000);
20         document.getElementById("showTime").innerHTML=Math.floor(usedtime/3600)+"时"+(Math.floor(usedtime/60)%60)+"分"+(usedtime%60)+"秒";
21     }
22     function stop(){    //暂停
23         clearTimeout(t);
24     }
25 </script>
26 </head>
27 <body>
28     <div style="position: absolute;top: 50px;left: 100px;font-size: 24px;background-color: #436EEE;padding: 5px;">
29         <div style="color: black;float: left;">计时器：</div>
30         <div id="showTime" style="color: white;float: left;">0时0分0秒</div>
31     </div>
32     <div style="position: absolute;top: 90px;left: 100px;font-size: 24px;padding: 5px;">
33         <input type="button" value="计时" onclick="begin()"/>
34         <input type="button" value="暂停" onclick="stop()"/>
35         <input type="button" value="继续" onclick="proceed()"/>
36     </div>
37 </body>
38 </html>

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta charset="UTF-8">
 7 <title>错题本</title>
 8 <link href="css/prac_use2.css" rel="stylesheet" type="text/css"/>
 9 </head>
10 <body background="images/img4.jpeg" font-size="25px">
11     <div class="content">
12         <form action="">
13             请输入年份(4位)：<input type="text" id="year" /><br /> 
14             <br/>
15             请输入月份(2位):<input type="text" id="month" /><br /> 
16              <br/>
17             请输入选择月份的日(2位):<input type="text" id="day" /><br />
18              <br/>
19         </form>
20         <table id="ti">
21            <tr>
22               <td>题目</td>
23               <td>答案</td>
24            </tr>
25         </table>
26         <div>
27            <input  class="input" type="submit" value="提交"/>
28            <input class="input"  type="button" value="退出"/>
29         
30         </div>
31     </div>
32 </body>
33 </html>

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta charset="UTF-8">
 7 <title>Practice</title>
 8 <link href="css/prac_use.css" rel="stylesheet" type="text/css"/>
 9 <script type="text/javascript" src="ajax/prcList.js"></script>
10 <script type="text/javascript" src="ajax/jquery-3.5.1.js"></script>
11 <script type="text/javascript">
12     var usedtime = -1;    //计时已经花费的时间，单位秒
13     var t;//计时器对象
14     function begin(){    //计时开始
15         usedtime = -1;
16         clearTimeout(t);
17         proceed();
18     }
19     function proceed(){    //继续
20         usedtime++;
21         clearTimeout(t);
22         t = setTimeout("proceed()",1000);
23         document.getElementById("showTime").innerHTML=Math.floor(usedtime/3600)+"时"+(Math.floor(usedtime/60)%60)+"分"+(usedtime%60)+"秒";
24     }
25     function stop(){    //暂停
26         clearTimeout(t);
27     }
28     
29     function getValue(){
30         var selected_val = document.getElementById("options").value;
31         
32     }
33     function exit(){
34         window.location.href="index.jsp";
35     }
36 </script>
37 </head>
38 <body  background="images/img4.jpeg">
39     <div class="content">
40     <div id="clock">
41        <div style="position: absolute;top: 50px;left: 900px;font-size: 24px;background-color: #436EEE;padding: 5px;">
42         <div style="color: black;float: left;">计时器：</div>
43         <div id="showTime" style="color: white;float: left;">0时0分0秒</div>
44      </div>
45       <div style="position: absolute;top: 90px;left: 900px;font-size: 24px;padding: 5px;">
46         <input type="button" value="暂停" onclick="stop()"/>
47       </div>
48     </div>
49        <form action="" method="post">
50          请选择难度：<select id="options">
51              <option value=0>--请选择题目的难度--</option>
52              <option value=1>两位数字加减</option>
53              <option value=2>两位数字乘除</option>
54              <option value=3>三位数字加减乘除</option>
55              <option value=5>四位数字加减</option>
56              <option value=6>四位数字乘除</option>
57           </select>
58      <table id="table">
59          <tr>
60             <td>题目</td>
61             <td>答案</td>
62          </tr>
63      </table>
64      <!-- 用于显示成绩 -->
65      <table id="score">
66        
67      </table>
68       </form>
69      </div>
70      <div class="bottom">
71          <input type="button" id="sub" value="提交答题请求" onclick="begin();empList()" onblur="getValue()"/>
72           <input type="button" id="sub" value="已完成答题" onclick="stop()"/>
73          <input type="button"  id="exit" value="退出" onclick="stop();exit()"/> 
74      </div> 
75 </body>
76 </html>

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html>
 4 <html>
 5 <head>
 6 <meta charset="UTF-8">
 7 <title>查询成绩页面</title>
 8 </head>
 9 <body background="images/img4.jpeg">
10     <div>
11        <table id="content">
12           <tr>
13              <td>成绩ID</td>
14              <td>难度</td>
15              <td>得分</td>
16              <td>用时</td>
17              <td>日期</td>
18           </tr>
19        </table>
20     </div>
21 </body>
22 </html>