《小学生四则运算题卡》—— —— 毛锦媛
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>
4. 测试
出题类的测试
页面实现:
1.register注册页面: 注册前VS 注册后
2.login页面: 登录前VS登录后
3.index页面:
点击“开始答题”打开答题页面。
点击“已完成答题”在答题页面下方用ajax实现局部刷新,显示得分消息。(暂未实现)
点击“成长小足迹”打开错题本页面。
4.practice答题页面:未点击前 VS 点击提交答题后 VS 点了退出按钮
5.failedBook成长小足迹页面
5. 总结:
总结:
设计的时候想的挺好,但是实现时就会感觉自己会的不多,而且自己的思路自己没法实现,反省了下自己,觉得自己的知识还需要多多吸收,多提高编码能力,这样的话就不会眼高手低,有些功能实现不了了。
有些暂时未实现的功能,仍然在努力寻找其他的思路中。