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

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：

 

项目结构：

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

           要完成的功能：

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

  　　　　2. 获取select框里选的值   OK

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

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

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

3.编码

dao层(3个)

package cn.hnzj.dao;

import cn.hnzj.entity.Student;

public interface RegisterDao {
    public void insertStu(Student s);    //插入学生
    
}

package cn.hnzj.dao;

import cn.hnzj.entity.Student;

public interface LoginDao {
    public Student findByStuName(String name);
}

package cn.hnzj.dao;

import java.sql.Date;

import cn.hnzj.entity.Grade;

public interface GradeDao {
    public void insertGrade(Grade g);   //插入成绩
    public Grade findByTime(Date t);    //根据日期查找对应的成绩信息
}

entity类（3个）

package cn.hnzj.entity;
/**
 * Student实体类
 * @author Asus
 *
 */
public class Student {
    private int sid;    //账号ID
    private String name;   //名字
    private String pwd;    //密码
    public int getSid() {
        return sid;
    }
    public void setSid(int sid) {
        this.sid = sid;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getPwd() {
        return pwd;
    }
    public void setPwd(String pwd) {
        this.pwd = pwd;
    }
    @Override
    public String toString() {
        return "Student [sid=" + sid + ", name=" + name + ", pwd=" + pwd + "]";
    }
    
    

}

package cn.hnzj.entity;
/**
 * Grade成绩类

 * @author Asus
 *
 */

import java.text.SimpleDateFormat;
import java.util.Date;

public class Grade {
     private int gid;
     private Integer stuID;
     private String step;
     private int score;
     private int used;
     private Date time;
    
    
    public int getGid() {
        return gid;
    }


    public void setGid(int gid) {
        this.gid = gid;
    }


    public Integer getStuID() {
        return stuID;
    }


    public void setStuID(Integer stuID) {
        this.stuID = stuID;
    }


    public String getStep() {
        return step;
    }


    public void setStep(String step) {
        this.step = step;
    }


    public int getScore() {
        return score;
    }


    public void setScore(int score) {
        this.score = score;
    }


    public int getUsed() {
        return used;
    }


    public void setUsed(int used) {
        this.used = used;
    }


    public Date getTime() {
        return time;
    }


    public void setTime(Date time) {
        this.time = time;
    }


    @Override
    public String toString() {
        //对时间进行格式化输出
        String realTime = new SimpleDateFormat("yyyy-MM-dd").format(time);
        return "Grade [gid=" + gid + ", stuID=" + stuID + ", step=" + step + ", score=" + score + ", used=" + used
                + ", time=" + realTime + "]";
    }
    
     
}

package cn.hnzj.entity;

public class JsonResult<T> {
    private int status;   //状态码
    private String msg;   //错误信息
    private T data;
    
    public int getStatus() {
        return status;
    }
    public void setStatus(int status) {
        this.status = status;
    }
    public String getMsg() {
        return msg;
    }
    public void setMsg(String msg) {
        this.msg = msg;
    }
    public T getData() {
        return data;
    }
    public void setData(T data) {
        this.data = data;
    }
    @Override
    public String toString() {
        return "JsonResult [status=" + status + ", msg=" + msg + ", data=" + data + "]";
    }
    
    

}

Subject类：

package cn.hnzj.game;

import java.util.ArrayList;

import java.util.List;

import cn.hnzj.utils.*;

/**
 * 习题类 定义了生成习题的方法
 * 
 * @author Asus
 *
 */
public class Subject {
    private static String[] fu = { "+", "-", "*", "/" };

    /**
     * 功能1. 根据传入的个数来生成题目
     * 
     * @param List<String>
     */
    public List<String> AllTwo_1_Examp(int count) {
        List<String> examList = new ArrayList<String>();
        for (int i = 0; i < count; i++) {
            String create = Ti.two_1();
            examList.add(create);
        }
        return examList;
    }
    
    public List<String> AllTwo_2_Examp(int count) {
        List<String> examList = new ArrayList<String>();
        for (int i = 0; i < count; i++) {
            String create = Ti.two_2();
            examList.add(create);
        }
        return examList;
    }

    public List<String> AllThree_Examp(int count) {
        List<String> examList = new ArrayList<String>();
        for (int i = 0; i < count; i++) {
            String create = Ti.three();
            examList.add(create);
        }
        return examList;
    }
    
    /**
     * 功能2.对生成的题目进行运算
     * 
     * @return List<String>
     */

    public List<String> result(List<String> list) {
        // 1. 创建用于保存答案的集合
        List<String> resultList = new ArrayList<String>();
        // 2. 调用方法遍历集合中的每个式子进行计算，并将计算出来的结果存进集合
        for (String s : list) {
            //因为生成的式子含有=,脚本不能对含有等号的式子计算，所以要把等号截掉
            String newStr = s.substring(0, s.length() - 1);     
            String d = SubjectUtils.count(newStr);
            resultList.add(d);
        }
        return resultList;
    }

}

utils（四个）

package cn.hnzj.utils;
import java.util.Random;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
import javax.script.ScriptException;

/**
 * Subject类所用的工具类
 * 
 * @author Asus
 *
 */
public class SubjectUtils {
    private static String[] fu1= {"+", "-"};
    private static String[]  fu2={"*", "/"};
      private static String[] fu3 = { "+", "-", "*", "/" };

    // 方法一：随机产生运算符
    public static String createFu(String[] fu) {
        int len=fu.length;
        Random random = new Random();
        int index = random.nextInt(len);
        return fu[index];
    }
    // 方法三：  随机产生整数
    public static int createNum() {
        // 1. 创建随机数对象
        Random ran = new Random();
        // 2. 调用方法生成1~100之间的整数
        int num=ran.nextInt(100)+1;
        return num;
    }

    // 方法四：对生成的题目进行计算，并以字符串的结果进行返回
    public static String count(String s) {
        ScriptEngine jse = new ScriptEngineManager().getEngineByName("JavaScript");
        Object o_res;
        String res = null;
        try {
            o_res = jse.eval(s);
            String string = o_res.toString();
            if (string.equals(".")) {
                int parseInt = Integer.parseInt(string);
                String valueOf = String.valueOf(parseInt);
                res=valueOf;
                return res;
                } 
            res=string;
        } catch (ScriptException e1) {
            e1.printStackTrace();
        }
        return res;
    }

}

package cn.hnzj.utils;
/**
 * 1. 定义减法、除法，方便式子的合理性
 * 如果式子不合理，将重新生成
 * @author Asus
 *
 */
public class CommonUtils {
     public static boolean jian(int n1,int n2) {
         boolean flag=true;
         if(n1-n2 < 0) {
             return false;
         }
         return flag;
     }
     
     public static boolean devide(int n1,int n2) {
         boolean flag=true;
         if(n1/n2 == 0) {
             return false;
         }
         return flag;
     }
     
     
}

package cn.hnzj.utils;
/**
 * 生成小学生选择生成的题型
 * @author Asus
 *
 */
public class Ti {
    private static String[] fu1= {"+", "-"};
    private static String[]  fu2={"*", "/"};
      private static String[] fu3 = { "+", "-", "*", "/" };
   //第一大类
     public static String two_1() {
         String ti=" ";
         // 1. 数字
         int first = SubjectUtils.createNum();
         int second=SubjectUtils.createNum();
         // 2. 符号
         String createFu = SubjectUtils.createFu(fu1);
         // 3.生成
         if(createFu.equals("-")) {
             while(!CommonUtils.jian(first, second)) {
                 first=SubjectUtils.createNum();
             }
         }
         ti=first+createFu+second+"=";
         
         return ti;
     }
     public static String two_2() {
         String ti=" ";
         // 1. 数字
         int first = SubjectUtils.createNum();
         int second=SubjectUtils.createNum();
         // 2. 符号
         String createFu = SubjectUtils.createFu(fu2);
         // 3.生成
         if(createFu.equals("/")) {
             while(!CommonUtils.devide(first, second)) {
                 first=SubjectUtils.createNum();
             }
         }
         ti=first+createFu+second+"=";
         
         return ti;
     }
  // 第二大类
    public static String three() {
        String ti=" ";
         // 1. 数字
         int first = SubjectUtils.createNum();
         int second=SubjectUtils.createNum();
         int third=SubjectUtils.createNum();
         // 2. 符号
         String createFu = SubjectUtils.createFu(fu3);
         String createFu2 = SubjectUtils.createFu(fu3);
         // 3.生成
         if(createFu.equals("/") ) {
             while(!CommonUtils.devide(first, second)) {
                 first=SubjectUtils.createNum();
             }
             if(createFu2.equals("/")) {
                 while(!CommonUtils.devide(first+second, third)) {
                      third=SubjectUtils.createNum();
                  }
             }
             if(createFu2.equals("-")) {
                 while(!CommonUtils.jian(first+second, third)) {
                      third=SubjectUtils.createNum();
                  }
             }
             
         }
         if(createFu.equals("-") ) {
             while(!CommonUtils.jian(first, second)) {
                 first=SubjectUtils.createNum();
             }
             if(createFu2.equals("/")) {
                 while(!CommonUtils.devide(first+second, third)) {
                      third=SubjectUtils.createNum();
                  }
             }
             if(createFu2.equals("-")) {
                 while(!CommonUtils.jian(first+second, third)) {
                      third=SubjectUtils.createNum();
                  }
             }
             
         }
         ti=first+createFu+second+createFu2+third+"=";
         
         return ti;
        
    }

}

package cn.hnzj.utils;

import java.util.List;

/**
 * main测试所用的工具类
 * 
 * @author Asus
 *
 */
public class Utils {
    /**
     *功能 1 ： 根据用户输入的数，创建对应长度的数组
     */
    public static String[] retrunArray(int length) {
        return new String[length];
    }

    /**
     * 功能2： 根据用户传入的答案数组，遍历输出
     */
    public static void showArrayElement(String[] userArray) {
        System.out.print("[  ");
        for (int i = 0; i < userArray.length; i++) {
            System.out.print(userArray[i]);
            System.out.print(",");
        }
        System.out.print("  ]");
    }

    /**
     * 功能3 ： 遍历集合中的数据
     */
    public static void showList(List<String> userList) {
        for (String s : userList) {
            System.out.println(s);
        }
    }
}

Services（3个）

package cn.hnzj.service;

import javax.annotation.Resource;
import org.springframework.stereotype.Service;

import cn.hnzj.dao.RegisterDao;
import cn.hnzj.entity.Student;

@Service
public class RegisterService {
    @Resource
    private RegisterDao dao;
    
    public void insertStu(Student s) {
        dao.insertStu(s);
    }
}

package cn.hnzj.service;

import javax.annotation.Resource;
import org.springframework.stereotype.Service;

import cn.hnzj.dao.LoginDao;

import cn.hnzj.entity.Student;

@Service
public class LoginService {
    @Resource
   private LoginDao dao;
   
    public Student findStudentByName(String name) {
        Student stu = dao.findByStuName(name);
        return stu;
    }
}

package cn.hnzj.service;

import java.sql.Date;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import cn.hnzj.dao.GradeDao;
import cn.hnzj.entity.Grade;

@Service
public class GradeService {
    @Resource
    private GradeDao dao;
    
    public void insertGrade(Grade g) {
        dao.insertGrade(g);
    }
    
    public Grade findGradeByTime(Date d) {
        Grade findByTime = dao.findByTime(d);
        return findByTime;
    }
}

controller(4个)

package cn.hnzj.controller;

import java.sql.Date;
import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import cn.hnzj.entity.Grade;
import cn.hnzj.entity.JsonResult;
import cn.hnzj.service.GradeService;

@Controller
public class GradeController {
   @Resource
   private GradeService service;
   
   @RequestMapping("/insertGrade.do")
   public void insert(Integer stuID,String step,int score,int used,Date time) {
       Grade grade = new Grade();
       grade.setStuID(stuID);
       grade.setStep(step);
       grade.setScore(score);
       grade.setUsed(used);
       grade.setTime(time);
       service.insertGrade(grade);
   }
   
   @RequestMapping("/findGrade.do")
   @ResponseBody
   public JsonResult<Grade> findGradeByTime(Date time){
       JsonResult<Grade> result = new JsonResult<Grade>();
       Grade g = service.findGradeByTime(time);
       if(g == null) {
           result.setStatus(1);
           result.setMsg("没有查找指定日期的成绩哦");
       }
       result.setStatus(0);
       result.setData(g);
       return result;
   }
}

package cn.hnzj.controller;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import cn.hnzj.game.Subject;

@Controller
public class JsonController {
    @Resource(name="utils")
    private Subject utils;
    
    @RequestMapping("/json1.do")
    @ResponseBody
    public  List<String> toJson1(){
        List<String> result = utils.AllTwo_1_Examp(10);
        return result;
    }
    
    @RequestMapping("/json2.do")
    @ResponseBody
    public  List<String> toJson2(){
        List<String> result = utils.AllTwo_2_Examp(10);
        return result;
    }
    
    @RequestMapping("/json3.do")
    @ResponseBody
    public  List<String> toJson3(){
        List<String> result = utils.AllThree_Examp(10);
        return result;
    }
    
    
}

package cn.hnzj.controller;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import cn.hnzj.entity.JsonResult;
import cn.hnzj.entity.Student;
import cn.hnzj.service.LoginService;

@Controller
public class LoginController {
    @Resource
    private LoginService service;
    
    @RequestMapping("/login.do")
    @ResponseBody
    public JsonResult<Student> toLoginStu(String name,String pwd){
        // 1. 创建jsonResult对象
        JsonResult<Student> result = new JsonResult<Student>();
        Student s = service.findStudentByName(name);
        if(s == null) {   //说明没有该用户
            result.setStatus(1);
            result.setMsg("用户不存在!");
            return result;
        }
        if(!pwd.equals(s.getPwd())) {   //密码错误
            result.setStatus(2);
            result.setMsg("密码错误!");
            return result;
        }
        //说明可以登录
        result.setStatus(0);
        result.setData(s);
        return result;
    }

}

package cn.hnzj.controller;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import cn.hnzj.entity.JsonResult;
import cn.hnzj.entity.Student;
import cn.hnzj.service.RegisterService;

@Controller
public class RegisterController {
    @Resource
   private RegisterService service;
   
   @RequestMapping("/toRegStu.do")
   @ResponseBody
   public JsonResult<Student> addStu(String name,String pwd,HttpServletRequest req) throws Exception{
       req.setCharacterEncoding("utf-8");
       
       // 1. 创建JsonResult对象
       JsonResult<Student> result = new JsonResult<Student>();
        Student s = new Student();
        s.setName(name);
        s.setPwd(pwd);
        // 2.封装数据
       service.insertStu(s);
       result.setStatus(0);
       result.setData(s);
       return result;
   }
   
}

HTML部分（7个页面）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
 <html lang="en">
 
<head>
   <meta charset="UTF-8">
<title>register</title>
 <style>
* {
           margin: 0;
           padding: 0;
        }
          html {
                height: 100%;
              width: 100%;
             overflow: hidden;
              margin: 0;
             padding: 0;
             background: url(images/Desert.jpg) no-repeat 0px 0px;
              background-repeat: no-repeat;
              background-size: 100% 100%;
              -moz-background-size: 100% 100%;
         }
          
          body {
             display: flex;
              align-items: center;
             justify-content: center;
              height: 100%;
          }
          
          #loginDiv {
              width: 37%;
              display: flex;
              justify-content: center;
              align-items: center;
              height: 650px;
              background-color: rgba(75, 81, 95, 0.3);
              box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
             border-radius: 5px;
          }
          
          #name_trip {
              margin-left: 50px;
              color: red;
        }
          
         p, .sexDiv {
              margin-top: 10px;
             margin-left: 20px;
              color: azure;
          }
          
          .sexDiv>input,
          .hobby>input {
              width: 30px;
              height: 17px;
          }
          
          input,
          select {
              margin-left: 15px;
             border-radius: 5px;
              border-style: hidden;
              height: 30px;
              width: 140px;
              background-color: rgba(216, 191, 216, 0.5);
              outline: none;
              color: black;
              padding-left: 10px;
          }
          
          .button {
              border-color: cornsilk;
              background-color: rgba(100, 149, 237, .7);
              color: aliceblue;
              border-style: hidden;
              border-radius: 5px;
              width: 100px;
              height: 31px;
              font-size: 16px;
          }
          
          h1 {
              text-align: center;
              margin-bottom: 20px;
              margin-top: 20px;
             color: #f0edf3;
         }
         
         b {
             margin-left: 50px;
             color: #FFEB3B;
             font-size: 10px;
             font-weight: initial;
         }
    </style>
 </head>
 
 <body>
    <div id="loginDiv">
         <form action="toRegStu.do">
            <h1>REGESTER</h1>
             <p>用户姓名:<input name="name" type="text"/> </p>
            <p>用户密码:<input name="pwd" type="password"/></p>

            <p>确认密码:<input id="surePassword" type="password"/></p>

            <p>
               年级:
                <select name="type" id="userType">
                   <option value="0">--请选择--</option>
                     <option value="1">一年级</option>
                    <option value="2">二年级</option>
                    <option value="2">三年级</option>
                    <option value="2">四年级</option>
                    <option value="2">五年级</option>
                    <option value="2">六年级</option>
                </select>
             </p>


            <p style="text-align: center;">
               <input type="submit" class="button"  value="提交">
                 <input type="reset" class="button" value="重置">
             </p>
         </form>
    </div>
 
 </body>
 </html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
         
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: url(images/Desert.jpg) no-repeat 0px 0px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
         
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
         
        #loginDiv {
            width: 37%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 300px;
            background-color: rgba(75, 81, 95, 0.3);
            box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
            border-radius: 5px;
        }
         
        #name_trip {
            margin-left: 50px;
            color: red;
        }
         
        p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
        }
         
        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 30px;
            width: 140px;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }
         
        .button {
            border-color: cornsilk;
            background-color: rgba(100, 149, 237, .7);
            color: aliceblue;
            border-style: hidden;
            border-radius: 5px;
            width: 100px;
            height: 31px;
            font-size: 16px;
        }
    </style>
    <script type="text/javascript" src="ajax/prcList.js"></script>
</head>
 
<body>
    <div id="loginDiv">
        <form action="login.do" id="form">
            <h1 style="text-align: center;color: aliceblue;">登录页面</h1>
            <p>账号:<input name="name" id="userNname" type="text"><label id="name_trip"></label></p>
 
            <p>密码:  <input name="pwd" id="password" type="password"><label id="password_trip"></label></p>
 
            <div style="text-align: center;margin-top: 30px;">
                <input type="submit" class="button" value="登录" onclick="checkLogin()">
                <input type="reset" class="button" value="重置">
            </div>
        </form>
    </div>
 
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小学生口算题卡</title>
<!-- 外部导入Css文件，链接式 -->
<link type="text/css" rel="stylesheet" href="css/slideShow.css" />
</head>

<body>
    <p>小学生口算题卡APP</p>
    <div><a href="#">退出登录</a></div>
    <hr id="hr1" />
    <!-- 建立一个div控件作为图片框 -->
    <div class="imgBox">
        <!-- alt：图片路径失败时替换显示内容 -->
        <img class="img-slide img" src="images/img1.jpeg" alt="img1"> 
        <img class="img-slide img" src="images/img2.jpg" alt="img2"> 
        <img class="img-slide img" src="images/img3.jpg" alt="img3"> 
        <img class="img-slide img" src="images/img4.jpeg" alt="img4"> 
        <img class="img-slide img" src="images/img5.jpeg" alt="img5">
        <img class="img-slide img" src="images/img6.jpeg" alt="img6">
        <img class="img-slide img" src="images/img7.jpeg" alt="img7">
    </div>
<ul>
    <li><a href="#">开始答题</a></li>
    <li><a href="#">错题本</a></li>
    <li><a href="#">成长小足迹</a></li>
     
</ul>
</body>

<script type="text/javascript">
    // index：索引， len：长度
    var index = 0, len;
    // 类似获取一个元素数组
    var imgBox = document.getElementsByClassName("img-slide");
    len = imgBox.length;
    imgBox[index].style.display = 'block';
    // 逻辑控制函数
    function slideShow() {
        index++;
        // 防止数组溢出
        if (index >= len)
            index = 0;
        // 遍历每一个元素
        for (var i = 0; i < len; i++) {
            imgBox[i].style.display = 'none';
        }
        // 每次只有一张图片显示
        imgBox[index].style.display = 'block';
    }

    // 定时器，间隔3s切换图片
    setInterval(slideShow, 3000);
</script>

</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>计时器</title>
<script type="text/javascript">
    var usedtime = -1;    //计时已经花费的时间，单位秒
    var t;//计时器对象
    function begin(){    //计时开始
        usedtime = -1;
        clearTimeout(t);
        proceed();
    }
    function proceed(){    //继续
        usedtime++;
        clearTimeout(t);
        t = setTimeout("proceed()",1000);
        document.getElementById("showTime").innerHTML=Math.floor(usedtime/3600)+"时"+(Math.floor(usedtime/60)%60)+"分"+(usedtime%60)+"秒";
    }
    function stop(){    //暂停
        clearTimeout(t);
    }
</script>
</head>
<body>
    <div style="position: absolute;top: 50px;left: 100px;font-size: 24px;background-color: #436EEE;padding: 5px;">
        <div style="color: black;float: left;">计时器：</div>
        <div id="showTime" style="color: white;float: left;">0时0分0秒</div>
    </div>
    <div style="position: absolute;top: 90px;left: 100px;font-size: 24px;padding: 5px;">
        <input type="button" value="计时" onclick="begin()"/>
        <input type="button" value="暂停" onclick="stop()"/>
        <input type="button" value="继续" onclick="proceed()"/>
    </div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>错题本</title>
<link href="css/prac_use2.css" rel="stylesheet" type="text/css"/>
</head>
<body background="images/img4.jpeg" font-size="25px">
    <div class="content">
        <form action="">
            请输入年份(4位)：<input type="text" id="year" /><br /> 
            <br/>
            请输入月份(2位):<input type="text" id="month" /><br /> 
             <br/>
            请输入选择月份的日(2位):<input type="text" id="day" /><br />
             <br/>
        </form>
        <table id="ti">
           <tr>
              <td>题目</td>
              <td>答案</td>
           </tr>
        </table>
        <div>
           <input  class="input" type="submit" value="提交"/>
           <input class="input"  type="button" value="退出"/>
        
        </div>
    </div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Practice</title>
<link href="css/prac_use.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="ajax/prcList.js"></script>
<script type="text/javascript" src="ajax/jquery-3.5.1.js"></script>
<script type="text/javascript">
    var usedtime = -1;    //计时已经花费的时间，单位秒
    var t;//计时器对象
    function begin(){    //计时开始
        usedtime = -1;
        clearTimeout(t);
        proceed();
    }
    function proceed(){    //继续
        usedtime++;
        clearTimeout(t);
        t = setTimeout("proceed()",1000);
        document.getElementById("showTime").innerHTML=Math.floor(usedtime/3600)+"时"+(Math.floor(usedtime/60)%60)+"分"+(usedtime%60)+"秒";
    }
    function stop(){    //暂停
        clearTimeout(t);
    }
    
    function getValue(){
        var selected_val = document.getElementById("options").value;
        
    }
    function exit(){
        window.location.href="index.jsp";
    }
</script>
</head>
<body  background="images/img4.jpeg">
    <div class="content">
    <div id="clock">
       <div style="position: absolute;top: 50px;left: 900px;font-size: 24px;background-color: #436EEE;padding: 5px;">
        <div style="color: black;float: left;">计时器：</div>
        <div id="showTime" style="color: white;float: left;">0时0分0秒</div>
     </div>
      <div style="position: absolute;top: 90px;left: 900px;font-size: 24px;padding: 5px;">
        <input type="button" value="暂停" onclick="stop()"/>
      </div>
    </div>
       <form action="" method="post">
         请选择难度：<select id="options">
             <option value=0>--请选择题目的难度--</option>
             <option value=1>两位数字加减</option>
             <option value=2>两位数字乘除</option>
             <option value=3>三位数字加减乘除</option>
             <option value=5>四位数字加减</option>
             <option value=6>四位数字乘除</option>
          </select>
     <table id="table">
         <tr>
            <td>题目</td>
            <td>答案</td>
         </tr>
     </table>
     <!-- 用于显示成绩 -->
     <table id="score">
       
     </table>
      </form>
     </div>
     <div class="bottom">
         <input type="button" id="sub" value="提交答题请求" onclick="begin();empList()" onblur="getValue()"/>
          <input type="button" id="sub" value="已完成答题" onclick="stop()"/>
         <input type="button"  id="exit" value="退出" onclick="stop();exit()"/> 
     </div> 
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查询成绩页面</title>
</head>
<body background="images/img4.jpeg">
    <div>
       <table id="content">
          <tr>
             <td>成绩ID</td>
             <td>难度</td>
             <td>得分</td>
             <td>用时</td>
             <td>日期</td>
          </tr>
       </table>
    </div>
</body>
</html>

4.  测试

出题类的测试

 

 

页面实现：

1.register注册页面： 注册前VS  注册后

 

 

2.login页面： 登录前VS登录后

 

3.index页面：

  点击“开始答题”打开答题页面。

  点击“已完成答题”在答题页面下方用ajax实现局部刷新，显示得分消息。(暂未实现)

  点击“成长小足迹”打开错题本页面。

4.practice答题页面：未点击前 VS 点击提交答题后  VS 点了退出按钮

5.failedBook成长小足迹页面

 

 5. 总结：

 

总结：

设计的时候想的挺好，但是实现时就会感觉自己会的不多，而且自己的思路自己没法实现，反省了下自己，觉得自己的知识还需要多多吸收，多提高编码能力，这样的话就不会眼高手低，有些功能实现不了了。

有些暂时未实现的功能，仍然在努力寻找其他的思路中。