最近我和我的小伙伴yaoyali结成对子，共同写网页版的四则运算。虽然现在还没弄好，但是比起上次用纯java写的四则运算有了很大改进。
一.存放四则运算题目和答案的类
package com.jaovo.msg.model; public class DoubleOperation { private static int operationNumber; private static double[] result; private static String[] question; public static String[] getQuestion() { return question; } public static void setQuestion(String[] question) { DoubleOperation.question = question; } public int getOperationNumber() { return operationNumber; } public void setOperationNumber(int operationNumber) { this.operationNumber = operationNumber; } public double[] getResult() { return result; } public void setResult(double[] result) { this.result = result; } }
二.Welcom页面
@charset "UTF-8"; /****四则运算题目表格(<table>)****/ .box{ margin-top: 50px; } /****结果输入框(<input>)****/ .result{ width: 60px; padding: 5px; border:none; font-size:20px; border-bottom: solid yellowgreen 5px; text-align:center; } /****题目(<td>)****/ .expr{ font-size: x-large; } /****非分数/运算符(<div>)*****/ .nomal{ text-align:center;
float:left; position: relative; top: 16px; margin-left: 3px; margin-right: 3px; width="20px" } /****分数(<div>)****/ .fraction{ text-align:center; float: left; margin-left:3px; margin-right: 3px; width="20px" }
/****题目选择*****/ .option{ text-align: center; } /******你准备好了吗？按钮******/ .submit1{ padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; background: #C90; font-family: "微软雅黑"; font-weight: bold; font-size: 20px; } /*****提交按钮*****/ .submit{ padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; border-radius: 5px; background: cornflowerblue; border: none; cursor: pointer; color:lightyellow; font-family: "微软雅黑"; font-weight: bold; font-size: 20px; } /******计时器*******/ .timer{ position:fixed; top: 10px; right: 10px; border: none; width:50px; text-align: right; background: none; } .pause{ position:fixed; top: 30px; right: 10px; } /****题目选项****/ .option{ margin-left:auto; margin-right:auto; width:600px; margin-top: 130px; border:dashed #9ACD32 2px; padding-top: 100px; padding-bottom: 100px; } /****答题按钮*****/
<%@ 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"> <link rel="stylesheet" href="css/style.css"/> <title>小学生四则运算</title> <style type="text/css"> body { background-image:url(image/2.jpg); } #p1{text - indent:2em;text - align:center;font:italic 35px/40px 幼圆} </style> </head> <body> <p id="p1">欢迎小朋友来到小猪佩奇的数学乐园，快跟小猪佩奇一起去冒险吧！</p> <form action="choose.jsp" class="option"> <button class="submit1" style="margin-top:60px">你准备好了吗？</button> </form> </body> </html>
结果截图
三.选择出题数量及题目种类
choose.jsp和Connect.jsp
<%@ 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"> <link rel="stylesheet" href="css/style.css"/> <title>小学生四则运算</title> <style type="text/css"> body{ background-image:url(image/4.jpg); } </style> </head> <body> <div style="text-align:right;"> <a href="Welcome.jsp">退出</a><br><br> </div> <form action="Connect.jsp" class="option"> <center><h2>题目定制</h2></center> <p>选择题目类型： <select name="elementNum"> <option>2</option> <option>3</option> </select>元运算<br /></p> 选择题目数量： <input name="count" value="10" type="radio" />10 <input name="count" value="20" type="radio" />20 <input name="count" value="30" type="radio" />30 <input name="count" value="40" type="radio" />40 <input name="count" value="50" type="radio" />50 <input name="count" value="5000" type="radio" />5000<br/> <input name="count" value="1000000" type="radio" />10000000(极限测试，慎选！！) <br /><br /> <button class="submit" style="margin-top:50px">开始答题！</button> </form> </body> </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> </head> <body> <% String type=request.getParameter("elementNum"); String OperationNumber=request.getParameter("count"); if(OperationNumber==null||"".equals(OperationNumber)) { OperationNumber="10"; } if(type.equals("2")) { response.sendRedirect("DoubleOperation.jsp?OperationNumber="+OperationNumber); } else { response.sendRedirect("ThreeOperation.jsp?OperationNumber="+OperationNumber); } %> </body> </html>
四.二元四则运算
DoubleOperation.jsp
<%@ page import="java.util.Random" %> <%@ page import="java.lang.Math" %> <%@ page import="com.jaovo.msg.model.DoubleOperation" %> <%@ page import="java.math.BigInteger" %> <%@ 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> </head> <body> <form action="doDoubleOperation.jsp" method="post"> <div style="text-align:right;"> <a href="choose.jsp">题目定制</a> <a href="Welcome.jsp">退出</a><br><br> </div> <% int character=0;//运算符+，-，*，/ int num1=0;//运算式中第一个数 int num2=0;//运算式中第二个数 int correct=0;//计算正确的数目 int error=0;//计算错误的数目 String operat=null;//计算式 Random random = new Random(); int Endtime=1; //跳转时间 int operationNumber=Integer.parseInt(request.getParameter("OperationNumber"));//打印题目的数量 String question[]=new String[operationNumber]; double result[]=new double[operationNumber];//计算式的结果 for(int i=0;i<operationNumber;i++)//初始化计算式的结果 { result[i]=0; question[i]=null; } DoubleOperation doubleoperation=new DoubleOperation();//初始化.java文件中存储的计算公式个数，问题，答案 doubleoperation.setOperationNumber(operationNumber); doubleoperation.setQuestion(question); doubleoperation.setResult(result); for(int i=0;i<operationNumber;i++) { character=random.nextInt(4)%4+1; if(character==1)//计算加法 { num1=random.nextInt(100)%100;//随机出一个0~100的数 num2=random.nextInt(100)%100; String number1=String.valueOf(num1); String number2=String.valueOf(num2); operat="第("+(i+1)+")题"+number1+"+"+number2+"="; result[i]=num1+num2; } else if(character==2)//计算减法 { num1=random.nextInt(100)%100;//随机出一个1~100的数 if(num1==0) num1=num1+2;//若num1=0,则加2 num2=(int)random.nextInt(num1)%(num1);//随机出一个0~num1的数 String number1=String.valueOf(num1); String number2=String.valueOf(num2); operat="第("+(i+1)+")题"+number1+"-"+number2+"="; result[i]=num1-num2; } else if(character==3)//计算乘法 { num1=random.nextInt(9)%9;//随机出一个0~9的数 num2=random.nextInt(9)%9; String number1=String.valueOf(num1); String number2=String.valueOf(num2); operat="第("+(i+1)+")题"+number1+"*"+number2+"="; result[i]=num1*num2; } else //计算除法 { do{ num1=random.nextInt(81)%81;//随机出一个0~81的数 if(num1>9) num2=random.nextInt(9)%9; else { if(num1==0) num1++; num2=(int)random.nextInt(num1)%(num1); } if(num2==0)//当num2=0再重新生成num2 { num2=num2+1; } String number1=String.valueOf(num1); String number2=String.valueOf(num2); operat="第("+(i+1)+")题"+number1+"/"+number2+"="; result[i]=num1/num2; }while((result[i]>=10)||(num1%num2!=0));//商为10以内的数 } if(Double.valueOf(result[i])>100) {//如果结果大于100或小数位数大于1则不输出 i--; } else { question[i]=operat; %> <%=operat %><input type="text" name="child_result<%=i %>" ><br> <br> <% } } %> <input type="submit" value="提交" name="提交"> <% doubleoperation.setOperationNumber(operationNumber); doubleoperation.setQuestion(question); doubleoperation.setResult(result); %> <%-- <meta http-equiv="refresh" content ="<%=Endtime*60 %>;url=doDoubleOperation.jsp"> --%> <!-- Endtime分钟后跳转到结果界面 --> </form> </body> </html>
doDoubleOperation.jsp
<%@ page import="com.jaovo.msg.model.DoubleOperation" %> <%@ 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>Insert title here</title> </head> <body> <div style="text-align:right;"> <a href="choose.jsp">题目定制</a> <a href="Welcome.jsp">退出</a><br><br> </div> <% int correct=0;//计算正确的数目 int error=0;//计算错误的数目 int nullerror=0;//没答题的数目 DoubleOperation doubleoperation=new DoubleOperation(); double[] result=doubleoperation.getResult(); String[] question=doubleoperation.getQuestion(); int operationNumber=doubleoperation.getOperationNumber(); System.out.println("count="+operationNumber); for(int i=0;i<operationNumber;i++) { String child_result=request.getParameter("child_result"+i); %> <%=question[i] %><%=child_result %> <% if((null==child_result)||("".equals(child_result))) { nullerror++; %> 正确答案是<%=result[i]%><br><br> <% } else { double child_result2=Double.valueOf(child_result); if(child_result2==result[i]) { correct++; %> √<br><br> <% } else { error++; %> × 正确答案是<%=result[i]%><br><br> <% } } } %> <!-- <iframe src='DoubleOperation.jsp'/> --> 恭喜你！答对了<%=correct %>道题，答错了<%=error %>道题，没答<%=nullerror %>道题！！！ </body> </html>
四.三元运算
ThreeOperation.jsp
<%@ page import="java.util.Random" %> <%@ page import="java.lang.Math" %> <%@ page import="com.jaovo.msg.model.DoubleOperation" %> <%@ page import="java.math.BigInteger" %> <%@ 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> </head> <body> <form action="doDoubleOperation.jsp" method="post"> <div style="text-align:right;"> <a href="choose.jsp">题目定制</a> <a href="Welcome.jsp">退出</a><br><br> </div> <% int character1=0;//第一个运算符+，-，*，/ int character2=0;//第二个运算符 int num1=0;//运算式中第一个数 int num2=0;//运算式中第二个数 int num3=0;//运算式中的第三个数 int correct=0;//计算正确的数目 int error=0;//计算错误的数目 String operat=null;//计算式 int operationNumber=Integer.parseInt(request.getParameter("OperationNumber"));//打印题目的数量 String question[]=new String[operationNumber]; double result[]=new double[operationNumber];//计算式的结果 Random random = new Random(); int Endtime=1; //跳转时间 for(int i=0;i<operationNumber;i++)//初始化计算式的结果 { result[i]=0; question[i]=null; } DoubleOperation doubleoperation=new DoubleOperation();//初始化.java文件中存储的计算公式个数，问题，答案 doubleoperation.setOperationNumber(operationNumber); doubleoperation.setQuestion(question); doubleoperation.setResult(result); for(int i=0;i<operationNumber;i++) { character1=random.nextInt(4)%4+1; if(character1==1)//计算加法 { num1=random.nextInt(100)%100;//随机出一个0~100的数 num2=random.nextInt(100)%100; String number1=String.valueOf(num1); String number2=String.valueOf(num2); operat="第("+(i+1)+")题"+number1+"+"+number2; result[i]=num1+num2; } else if(character1==2)//计算减法 { num1=random.nextInt(100)%100;//随机出一个1~100的数 if(num1==0) num1=num1+2;//若num1=0,则加2 num2=(int)random.nextInt(num1)%(num1);//随机出一个0~num1的数 String number1=String.valueOf(num1); String number2=String.valueOf(num2); operat="第("+(i+1)+")题"+number1+"-"+number2; result[i]=num1-num2; } else if(character1==3)//计算乘法 { num1=random.nextInt(9)%9;//随机出一个0~9的数 num2=random.nextInt(9)%9; String number1=String.valueOf(num1); String number2=String.valueOf(num2); operat="第("+(i+1)+")题"+number1+"*"+number2; result[i]=num1*num2; } else //计算除法 { do{ num1=random.nextInt(81)%81;//随机出一个0~81的数 if(num1>9) num2=random.nextInt(9)%9; else { if(num1==0) num1++; num2=(int)random.nextInt(num1)%(num1); } if(num2==0)//当num2=0再重新生成num2 { num2=num2+1; } String number1=String.valueOf(num1); String number2=String.valueOf(num2); operat="第("+(i+1)+")题"+number1+"/"+number2; result[i]=num1/num2; }while((result[i]>=10)||(num1%num2!=0));//商为10以内的数 } character2=random.nextInt(4)%4+1; if(character2==1)//计算第二个加号 { num3=random.nextInt(100)%100; String number3=String.valueOf(num3); operat=operat+"+"+num3+"="; result[i]=result[i]+num3; } else if(character2==2)//第二个运算符是减号 { if(result[i]==0) result[i]=result[i]+2; if(result[i]<100){ num3=(int)random.nextInt((int)result[i])%((int)result[i]);//随机出一个小于被减数的数 } else { num3=random.nextInt(100)%100; } String number3=String.valueOf(num3); operat=operat+"-"+num3+"="; result[i]=result[i]-num3; } else if(character2==3)//乘号 { if(character1==2)//若第一个运算符是减号，则再随机出来一个第二个数与第三个随机的数小于第二个数 num1>=num2*num3 num3<=num1/num2 { if(num2>9) { num2=(int)random.nextInt(9)%(9); } if(num1==0) num3=0; else { if(num2==0) num2=num2+1; int num4=num1/num2; num3=(int)random.nextInt(num4)%(num4); } if(num3>9) { num3=(int)random.nextInt(9)%(9); } String number3=String.valueOf(num3); operat="第("+(i+1)+")题"+num1+"-"+num2+"*"+num3+"="; result[i]=num1-(num2*num3); } else //第一个符号是加乘除。若是加，则先计算num2与num3,若是乘除，则计算顺序不变 { if(character1==1){//第一个运算符是加号 num3=(int)random.nextInt(100)%(100); String number3=String.valueOf(num3); operat=operat+"*"+num3+"="; result[i]=num1+(num2*num3); } else if(character1==3)//第一个符号是乘号，num1*num2<=9 { String number2,number3; do{ num2=(int)random.nextInt(9)%(9); result[i]=num1*num2; System.out.println("连乘"+result[i]); number2=String.valueOf(num2); }while(result[i]>9); num3=(int)random.nextInt(9)%(9); number3=String.valueOf(num3); operat="第("+(i+1)+")题"+num1+"*"+num2+"*"+num3+"="; result[i]=num1*num2*num3; } else {//第一个符号是除号 num3=(int)random.nextInt(9)%(9); String number3=String.valueOf(num3); operat=operat+"*"+num3+"="; result[i]=result[i]*num3; } } } else//第二个运算符是除号 { if(num2>81){//第二个符号是除号 num2=(int)random.nextInt(81)%(81); } if(character1==1)//第一个运算符是加号，先算num2/num3,再算num+(num2/num3) { String number3,number2; if(num2>81){//第二个符号是除号 num2=(int)random.nextInt(81)%(81); } do{ if(num2>9) num3=random.nextInt(9)%9; else { if(num2==0) num2++; num3=(int)random.nextInt(num2)%(num2); } if(num3==0) { num3=num3+1; } number3=String.valueOf(num3); num2=random.nextInt(81)%(81); }while(((num2/num3)>=10)||(num2%num3!=0));//商为10以内的数 operat="第("+(i+1)+")题"+num1+"+"+num2+"/"+num3+"="; result[i]=num1+(num2/num3); } else if(character1==2)//第一个运算式减号，则num1-num2/num3 { String number3=null; int k=0; if(num2>81){//第二个符号是除号 num2=(int)random.nextInt(81)%(81); } do{ if(num2>9) num3=random.nextInt(9)%9; else { if(num2==0) num2++; num3=(int)random.nextInt(num2)%(num2); } if(num3==0) { num3=num3+1; } number3=String.valueOf(num3); num2=(int)random.nextInt(81)%(81); }while(((num2/num3)>=10)||(num2%num3!=0)||((num2/num3)>num1));//商为10以内的数 operat="第("+(i+1)+")题"+num1+"-"+num2+"/"+num3+"="; result[i]=num1-(num2/num3); } else if(character1==4)//第一个运算符是除号，按顺序计算 { String number3; do{ if(result[i]>9) num3=random.nextInt(9)%9; else { if(result[i]==0) num2++; num3=(int)random.nextInt((int)result[i])%((int)result[i]); } if(num3==0) { num3=num3+1; } number3=String.valueOf(num3); }while(((result[i]/num3)>=10)||(result[i]%num3!=0));//商为10以内的数 operat=operat+"/"+number3+"="; result[i]=result[i]/num3; } else //第一个运算符是乘号，按顺序计算 { do{ if(result[i]>9) num3=random.nextInt(9)%9; else { if(result[i]==0) result[i]++; num3=(int)random.nextInt((int)result[i])%((int)result[i]); } if(num3==0) { num3=num3+1; } String number3=String.valueOf(num3); }while(((result[i]/num3)>=10)||(result[i]%num3!=0));//商为10以内的数 operat=operat+"/"+num3+"="; result[i]=result[i]/num3; } } if(Double.valueOf(result[i])>100) {//如果结果大于100或小数位数大于1则不输出 i--; } else { question[i]=operat; System.out.println(operat+result[i]); %> <%=operat %><input type="text" name="child_result<%=i %>" ><br> <br> <% } } %> <input type="submit" value="提交" name="提交"> <% doubleoperation.setOperationNumber(operationNumber); doubleoperation.setQuestion(question); doubleoperation.setResult(result); %> </form> </body> </html>
doThreeOperation.jsp
<%@ page import="com.jaovo.msg.model.DoubleOperation" %> <%@ 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>Insert title here</title> </head> <body> <div style="text-align:right;"> <a href="choose.jsp">题目定制</a> <a href="Welcome.jsp">退出</a><br><br> </div> <% int correct=0;//计算正确的数目 int error=0;//计算错误的数目 int nullerror=0;//没答题的数目 DoubleOperation doubleoperation=new DoubleOperation(); double[] result=doubleoperation.getResult(); String[] question=doubleoperation.getQuestion(); int operationNumber=doubleoperation.getOperationNumber(); System.out.println("count="+operationNumber); for(int i=0;i<operationNumber;i++) { String child_result=request.getParameter("child_result"+i); %> <%=question[i] %><%=child_result %> <% if((null==child_result)||("".equals(child_result))) { nullerror++; %> 正确答案是<%=result[i] %><br><br> <% } else { double child_result2=Double.valueOf(child_result); if(child_result2==result[i]) { correct++; %> √<br><br> <% } else { error++; %> × 正确答案是<%=result[i]%><br><br> <% } } } %> 恭喜你！答对了<%=correct %>道题，答错了<%=error %>道题，没答<%=nullerror %>道题！！！ </body> </html>
