四则运算（web）

结对开发人员：冯硕，宫春岩。

设计思想：首先我们编写了一个欢迎界面，然后同action 跳转到第一个界面，在第一个界面输入取值范围出题的数量等等数据，利用javascrpt代码对输入的数进行判断，只有符合的数据才能够进行下一步操作，利用table将数据传输到下一个网页，第二个网页使用了javabean，在java文件利用了以前编写的java算法，将题目出出来，然后利用text输入答案，将题和答案用sceeson传到第三个页面，在第三个页面掉用javabean的得数算法调出答案，和你输入的得数利用scrpt进行判断，是否输入的正确。

程序代码：

<!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>
aaa
<%@ 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=ISO-8859-1">
<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(图片一.jpg);
background-size:100%;
}//设置背景图片
</style>

            <center>
<h1><font color="blue"><strong>四则运算 </font><br></h1>

<form  name="login"onSubmit="return check();"   action="chengxu.jsp"  method="post" >

题目个数:<input type="text" name="use"size="16"> <br>

取值范围:<input type="text"name ="fan"size="5"><input type="text"name ="wei"size="5"><br>

 <input type="submit"value="开始答题">
 </form>
            </center>
            
</body>

</html>
<script language="javascript">
        function check(){
             if (login.use.value =="")
             {
              alert("输入不能为空!");
              return false;
             }
             
             
            if(login.fan.value==""&&login.wei.value=="")
             {
                 alert("取值范围不能为零!");
                 return false;
             }
        
        
            
        
            if(login.fan.value>login.wei.value )
             {
                 alert("取值范围由小到大");
                 return false;
             }
             else return true;
             
            }
        
    
    
    </script>        
<center>
<br>请在以下选项中打勾:
  <input type="checkbox" name="function" value=1>有乘除
  <input type="checkbox" name="function" value=2>无余数
  <input type="checkbox" name="function" value=3>有括号
  <br>
  <br>
</center>
weekfour.jsp
<%@ 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>
myjsp.jsp

运行截图：

 

 总结：

　　这是第一次与别人结对编写程序，我和我的队友设计思路有些不同，但是经过我俩的讨论和研究，最终确定了编写的方向。在编写程序遇到问题时，也会一起讨论问题。这次结对编程是我们合作的开始，也让我们学习到了结对编程的重要性和必要性。

PSP：

预计

实际：

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/gong123/p/6679126.html