设计思想：
设计一个登录界面，然后通过jsp跳转到之前运行的四则运算代码上。在登录界面上可以填写运行范围，题目数量等可改变量词。
在输出答案后可以输出是否正确，错误则输出正确答案。
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<style>
body {
background: #111;
}
canvas {
background: #111;
border: 1px solid #171717;
display: block;
left: 50%;
margin: -51px 0 0 -201px;
position: absolute;
top: 50%;
}
</style>
</head>
<body>
<script>/*========================================================*/
/* Light Loader
/*========================================================*/
var lightLoader = function(c, cw, ch){
var _this = this;
this.c = c;
this.ctx = c.getContext('2d');
this.cw = cw;
this.ch = ch;
this.loaded = 0;
this.loaderSpeed = .6;
this.loaderHeight = 10;
this.loaderWidth = 310;
this.loader = {
x: (this.cw/2) - (this.loaderWidth/2),
y: (this.ch/2) - (this.loaderHeight/2)
};
this.particles = [];
this.particleLift = 180;
this.hueStart = 0
this.hueEnd = 120;
this.hue = 0;
this.gravity = .15;
this.particleRate = 4;
/*========================================================*/
/* Initialize
/*========================================================*/
this.init = function(){
this.loop();
};
/*========================================================*/
/* Utility Functions
/*========================================================*/
this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);};
this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);};
/*========================================================*/
/* Update Loader
/*========================================================*/
this.updateLoader = function(){
if(this.loaded < 100){
this.loaded += this.loaderSpeed;
} else {
this.loaded = 0;
}
};
/*========================================================*/
/* Render Loader
/*========================================================*/
this.renderLoader = function(){
this.ctx.fillStyle = '#000';
this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight);
this.hue = this.hueStart + (this.loaded/100)*(this.hueEnd - this.hueStart);
var newWidth = (this.loaded/100)*this.loaderWidth;
this.ctx.fillStyle = 'hsla('+this.hue+', 100%, 40%, 1)';
this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight);
this.ctx.fillStyle = '#222';
this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight/2);
};
/*========================================================*/
/* Particles
/*========================================================*/
this.Particle = function(){
this.x = _this.loader.x + ((_this.loaded/100)*_this.loaderWidth) - _this.rand(0, 1);
this.y = _this.ch/2 + _this.rand(0,_this.loaderHeight)-_this.loaderHeight/2;
this.vx = (_this.rand(0,4)-2)/100;
this.vy = (_this.rand(0,_this.particleLift)-_this.particleLift*2)/100;
this.width = _this.rand(1,4)/2;
this.height = _this.rand(1,4)/2;
this.hue = _this.hue;
};
this.Particle.prototype.update = function(i){
this.vx += (_this.rand(0,6)-3)/100;
this.vy += _this.gravity;
this.x += this.vx;
this.y += this.vy;
if(this.y > _this.ch){
_this.particles.splice(i, 1);
}
};
this.Particle.prototype.render = function(){
_this.ctx.fillStyle = 'hsla('+this.hue+', 100%, '+_this.rand(50,70)+'%, '+_this.rand(20,100)/100+')';
_this.ctx.fillRect(this.x, this.y, this.width, this.height);
};
this.createParticles = function(){
var i = this.particleRate;
while(i--){
this.particles.push(new this.Particle());
};
};
this.updateParticles = function(){
var i = this.particles.length;
while(i--){
var p = this.particles[i];
p.update(i);
};
};
this.renderParticles = function(){
var i = this.particles.length;
while(i--){
var p = this.particles[i];
p.render();
};
};
/*========================================================*/
/* Clear Canvas
/*========================================================*/
this.clearCanvas = function(){
this.ctx.globalCompositeOperation = 'source-over';
this.ctx.clearRect(0,0,this.cw,this.ch);
this.ctx.globalCompositeOperation = 'lighter';
};
/*========================================================*/
/* Animation Loop
/*========================================================*/
this.loop = function(){
var loopIt = function(){
requestAnimationFrame(loopIt, _this.c);
_this.clearCanvas();
_this.createParticles();
_this.updateLoader();
_this.updateParticles();
_this.renderLoader();
_this.renderParticles();
};
loopIt();
};
};
/*========================================================*/
/* Check Canvas Support
/*========================================================*/
var isCanvasSupported = function(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};
/*========================================================*/
/* Setup requestAnimationFrame
/*========================================================*/
var setupRAF = function(){
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
};
if(!window.requestAnimationFrame){
window.requestAnimationFrame = function(callback, element){
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
};
if (!window.cancelAnimationFrame){
window.cancelAnimationFrame = function(id){
clearTimeout(id);
};
};
};
/*========================================================*/
/* Define Canvas and Initialize
/*========================================================*/
if(isCanvasSupported){
var c = document.createElement('canvas');
c.width = 400;
c.height = 100;
var cw = c.width;
var ch = c.height;
document.body.appendChild(c);
var cl = new lightLoader(c, cw, ch);
setupRAF();
cl.init();
}
</script>
<div style="position:absolute; bottom: 7px; 100%; left: 140px;">
<div class="footer-banner" style="728px;margin:30px auto">
<form action="weekfour.jsp" >
<td><font color="#0000FF">准备好答题了吗？</font></td>
<input type="submit" name="submit" value="我准备好了">
</form>
</div>
</div>
</body>
</html>
package test;
import java.util.Scanner;
public class ssss {
public static void main(String[] args) {
// TODO Auto-generated method stub
Scanner num=new Scanner(System.in);
System.out.println("请选择题目类型：");
System.out.println("1.整数 2.真分数");
int type=num.nextInt();
if(type==1)zheng();
if(type==2)fen();
}
//整数四则运算
public static void zheng()
{
Scanner num=new Scanner(System.in);
System.out.println("请输入数值范围起始值：");
int fan1=num.nextInt();
System.out.println("请输入数值范围终点值：");
int fan2=num.nextInt();
System.out.println("请输入出题数量：");
int n = num.nextInt();
String timu[]=new String [n];
String q1="";
for(int i=0;i<n;i++)
{
boolean flag=true;
String b1="";
int x=(int)(Math.random()*fan2+fan1);//第一个数
int y=(int)(Math.random()*fan2+fan1);//第二个数
int a=(int)(Math.random() * 4);//用来判断四则运算的符号
if(a==0){q1=x+"+"+y+"=";
b1+=(x+y);}
if(a==1){
while(x<y){x=(int)(Math.random()*fan2+fan1); y=(int)(Math.random()*fan2+fan1);}
q1=x+"-"+y+"=";
b1+=(x-y);}
if(a==2){q1=x+"*"+y+"=";
b1+=(x*y);}
if(a==3){
while(y==0){y=(int)(Math.random()*fan2+fan1);}
q1=x+"/"+y+"=";
b1=yuefen(x,y);
}
int j;
for(j=0;j<i;j++)
{
if(q1.equals(timu[j]))
{
i--;
flag=false;
break;
}
}
if(flag){
timu[i]=q1;
System.out.print(q1);
String c1=num.next();
if(c1.equals(b1))
{
System.out.println(" 答案正确");
}
else
{
System.out.println(" 答案错误，正确答案为："+b1);
}
}}
}
//真分数四则运算
public static void fen()
{
Scanner num=new Scanner(System.in);
System.out.println("请输入分母数值范围起始值：");
int fan1=num.nextInt();
System.out.println("请输入分母数值范围终点值：");
int fan2=num.nextInt();
System.out.println("请输入出题数量：");
int n = num.nextInt();
String timu[]=new String [n];
for(int i=0;i<n;i++)
{
String k2="";
boolean flag=true;
int z1,z2;
int b1;
int c1;
int x1=(int)(Math.random()*fan2);//分子
int y1=(int)(Math.random()*fan2+fan1+1);//分母
int x2=(int)(Math.random()*fan2);//分子
int y2=(int)(Math.random()*fan2+fan1+1);//分母
String q1="";
int a=(int)(Math.random() * 4);//用来判断四则运算的符号
if(x2==0&&a==3) i--;
else{
if(a==0) {q1=x1+"/"+y1+"+"+x2+"/"+y2+"=";
b1=x1*y2+x2*y1;c1=y1*y2;
k2=yuefen(b1,c1);}
if(a==1) {while((x1*y2-x2*y1)<0){x1=(int)(Math.random()*fan2);y1=(int)(Math.random()*fan2+fan1+1);
x2=(int)(Math.random()*fan2);
y2=(int)(Math.random()*fan2+fan1+1);}
q1=x1+"/"+y1+"-"+x2+"/"+y2+"=";
b1=x1*y2-x2*y1;c1=y1*y2;
k2=yuefen(b1,c1);}
if(a==2) {q1="("+x1+"/"+y1+")"+"*"+"("+x2+"/"+y2+")"+"=";
b1=x1*x2;c1=y1*y2;
k2=yuefen(b1,c1);}
if(a==3) {
while(y1*x2==0){
x1=(int)(Math.random()*fan2);
x2=(int)(Math.random()*fan2);
y1=(int)(Math.random()*fan2+fan1+1);
y2=(int)(Math.random()*fan2+fan1+1);
}
q1="("+x1+"/"+y1+")"+"/"+"("+x2+"/"+y2+")"+"=";
b1=x1*y2;c1=x2*y1;
k2=yuefen(b1,c1);}
int j;
for(j=0;j<i;j++)
{
if(q1.equals(timu[j]))
{
i--;
flag=false;
break;
}
}
if(flag){
timu[i]=q1;
System.out.print(q1);
String k1=num.next();
if(k1.equals(k2))
{
System.out.println(" 答案正确");
}
else
{
System.out.println(" 答案错误，正确答案为："+k2);
}}
}
}
}
//对结果进行约分的函数
public static String yuefen(int a,int b)//a为分子，b为分母
{
int n = 0,z1,z2;
String z3="";
if(a==0) z3="0";
else{
int s=a<b?a:b;
for(int i=s;i>0;i--)
{
if(a%i==0&&b%i==0){
n=i;
break;}
}
z1=a/n;z2=b/n;
if(z1<z2){
z3+=z1;
z3+="/";
z3+=z2;}
else if(z1%z2==0){z3+=(z1/z2);}
else if(z1>z2){
int k;
k=z1/z2;
z3+=k;
z3+="'";
z3+=(z1-z2*k);
z3+="/";
z3+=z2;
}
}
return z3;
}
}
<%@ page language="java" import="java.sql.*" import="java.util.*" contentType="text/html;; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="suan.*"%>
<!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">
<script language="JavaScript">
function startTime()
{
var today=new Date();//定义日期对象
var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年
var MM = today.getMonth()+1;//通过日期对象的getMonth()方法返回年
var dd = today.getDate();//通过日期对象的getDate()方法返回年
var hh=today.getHours();//通过日期对象的getHours方法返回小时
var mm=today.getMinutes();//通过日期对象的getMinutes方法返回分钟
var ss=today.getSeconds();//通过日期对象的getSeconds方法返回秒
// 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09
MM=checkTime(MM);
dd=checkTime(dd);
mm=checkTime(mm);
ss=checkTime(ss);
var day; //用于保存星期（getDay()方法得到星期编号）
if(today.getDay()==0) day = "星期日 "
if(today.getDay()==1) day = "星期一 "
if(today.getDay()==2) day = "星期二 "
if(today.getDay()==3) day = "星期三 "
if(today.getDay()==4) day = "星期四 "
if(today.getDay()==5) day = "星期五 "
if(today.getDay()==6) day = "星期六 "
document.getElementById('nowDateTimeSpan').innerHTML=yyyy+"-"+MM +"-"+ dd +" " + hh+":"+mm+":"+ss+" " + day;
setTimeout('startTime()',1000);//每一秒中重新加载startTime()方法
}
function checkTime(i)
{
if (i<10){
i="0" + i;
}
return i;
}
</script>
</head>
<body onLoad="startTime()">
当前时间：<font color="#33FFFF"><span id="nowDateTimeSpan"></span></font>
<title> 答题界面</title>
</head>
<body>
<style type="text/css">
body
{
background-image:url(图片2.jpg);
background-size:100%;
}//设置背景图片
</style>
<center>
</center>
<%
String geshu = request.getParameter("use");//传递值
int ge=Integer.parseInt(geshu);
String BaseNumber= request.getParameter("fan");
String TopNumber= request.getParameter("wei");
String[] function = request.getParameterValues("function");
String[] s=new String[ge];
float k[]=new float[ge];
su a=new su();
a.SetValue(a.StrToNum(TopNumber),a.StrToNum(BaseNumber));
a.setaaa(a.StrToaaa(geshu));
if(function!=null){
for(int i=0;i<function.length;i++){
if(function[i].equals("1"))
{
a.SetValue1(1);
}
if(function[i].equals("2"))
{
a.SetValue2(1);
}
if(function[i].equals("3"))
{
a.SetValue3(0);
}
}
}
%>
<form action="myjsp.jsp" method="post">
<center>
<table width="200">
<tr>
<th> 题目</th>
<th>答案</th>
</tr>
</table>
<%
a.main();
float temp;
String[] se=new String[ge];
for(int i=0;i<ge;i++){
s[i]=a.cs(i);
se[i]="name";
se[i]=se[i]+i;
k[i]=a.css(i);
out.print("<tr>"+s[i]+"</tr>");
%>
<input type="text" name=<%=se[i] %>><br>
<%
}
session.setAttribute( "v1",s);
session.setAttribute( "v2",k);
session.setAttribute("v3", ge);
%>
<br><input type="submit" name="submit" value="提交">
</center>
<</form>
</body>
</html>
chengxu.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gb2312" contentType="text/html; charset=gb2312"%>
<%@ page import="suan.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<script language="JavaScript">
function startTime()
{
var today=new Date();//定义日期对象
var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年
var MM = today.getMonth()+1;//通过日期对象的getMonth()方法返回年
var dd = today.getDate();//通过日期对象的getDate()方法返回年
var hh=today.getHours();//通过日期对象的getHours方法返回小时
var mm=today.getMinutes();//通过日期对象的getMinutes方法返回分钟
var ss=today.getSeconds();//通过日期对象的getSeconds方法返回秒
// 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09
MM=checkTime(MM);
dd=checkTime(dd);
mm=checkTime(mm);
ss=checkTime(ss);
var day; //用于保存星期（getDay()方法得到星期编号）
if(today.getDay()==0) day = "星期日 "
if(today.getDay()==1) day = "星期一 "
if(today.getDay()==2) day = "星期二 "
if(today.getDay()==3) day = "星期三 "
if(today.getDay()==4) day = "星期四 "
if(today.getDay()==5) day = "星期五 "
if(today.getDay()==6) day = "星期六 "
document.getElementById('nowDateTimeSpan').innerHTML=yyyy+"-"+MM +"-"+ dd +" " + hh+":"+mm+":"+ss+" " + day;
setTimeout('startTime()',1000);//每一秒中重新加载startTime()方法
}
function checkTime(i)
{
if (i<10){
i="0" + i;
}
return i;
}
</script>
</head>
<body onLoad="startTime()">
当前时间：<font color="#33FFFF"><span id="nowDateTimeSpan"></span></font>
<title>结果</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<style type="text/css">
body
{
background-image:url(图片3.jpg);
background-size:100%;
}//设置背景图片
</style>
<% request.setCharacterEncoding("UTF-8");%>
<center>
<%
int ge=(int)session.getAttribute("v3");
String[] name=new String[ge];
String[] sum=new String[ge];
su a=new su();
float sum1[]=new float[ge];
int right=0;
String[] s= (String[])session.getAttribute("v1");
float[] k=(float[])session.getAttribute("v2");
for(int i=0;i<ge;i++)
sum1[i]=0;
for(int i=0;i<ge;i++){
name[i]="name";
name[i]=name[i]+i;
sum[i]=request.getParameter(name[i]);
//sum[i]=request.getParameterValues(name[i])";
out.print(s[i]);
out.print("<tr>"+sum[i]+"</tr>");
if(sum[i]=="")
out.print("未回答！");
else{
if(((int)(k[i]*100))%100!=0)
sum1[i]=a.StrToFloat1(sum[i]);
else
sum1[i]=a.StrToFloat(sum[i]);
if(Math.abs(sum1[i]*100-k[i]*100)<4){
out.print(" 回答正确！");
right++;
}
else
out.print(" 回答错误，正确答案是： "+k[i]);
}
out.println("<br>");
}
out.print("总共做对 "+right+" 题，正确率为："+(right/ge*1.0)*100+" %");
%><br>
<input type="button" value="返回首页" onClick="window.location.href='weekfour.jsp'">
<input type="button" value="关闭" onClick="window.close();">
</center>
</body>
</html>
总结：
这次实验重点我感觉在见面之间的跳转，以及对答案的验证以及提示正确题号等比较细节的问题。
经过这次代码编写过后学到了很多东西。