當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

web网页四则运算

發布時間：2024/10/12 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 web网页四则运算小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

設計思想：

設計一個登錄界面，然后通過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 = 0this.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; width:100%; left: 140px;"><div class="footer-banner" style="width: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 stubScanner 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"></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]);elsesum1[i]=a.StrToFloat(sum[i]);if(Math.abs(sum1[i]*100-k[i]*100)<4){out.print(" 回答正確！");right++;}elseout.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> ?

總結：

這次實驗重點我感覺在見面之間的跳轉，以及對答案的驗證以及提示正確題號等比較細節的問題。

經過這次代碼編寫過后學到了很多東西。

轉載于:https://www.cnblogs.com/bai123/p/6671854.html

總結

以上是生活随笔為你收集整理的web网页四则运算的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Web
网页

上一篇：安逸花上征信吗
下一篇：写下thinkphp5和thinkphp