设计思想：在上一次编程的基础之上进行简单的修改。网页版加上html代码，在其中以脚本的程序运行java程序。还有java程序中限制了题目重复，和运算符个数的限制。
源程序代码：
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'MyMath.jsp' starting page</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> <div id="cal"> <p> <span id="bracket1left"></span> <span id="num1">100</span> <span id="sign1">+</span> <span id="bracket2left"></span> <span id="num2">100</span> <span id="bracket1right"></span> <span id="sign2">+</span> <span id="num3">100</span> <span id="bracket2right"></span> <span>=</span> </p> <p>请输入答案 <input type="text" id="answer" value="" maxlength="8" style="50px;"> </p> <p> <input type="button" name="button" id="btnAns" value="答题" style="50px;height:30px;"> <input type="button" name="button" id="btnNext" value="继续" style="dispaly:none;50px;height:30px;"> </p> <p id="sans"> <span></span> </p> </div> <script type="text/javascript"> function getEleById(id) { return document.getElementById(id); } function randomNumber(limit) { return Math.floor(Math.random()*limit); } var sign = new Array("+","-","*","/"); var numa,numb,numx,num; var countSign1 = "+",countSign2 = "+"; getEleById("btnNext").onclick = function() { this.style.display = "none"; getEleById("btnAns").style.display = "inline"; getEleById("answer").disabled = ""; getEleById("answer").value = ""; getEleById("sans").innerHTML = ""; do { numa = randomNumber(10); numb = randomNumber(10); numx = randomNumber(10); coutSign1 = sign[randomNumber(100)%4]; coutSign2 = sign[randomNumber(100)%4]; } while((numb == 0 && coutSign1 == "/") || (numx == 0 && coutSign2 == "/")) numa = numa.toString(10); numb = numb.toString(10); numx = numx.toString(10); getEleById("num1").innerHTML = numa; getEleById("sign1").innerHTML = coutSign1; getEleById("num2").innerHTML = numb; getEleById("sign2").innerHTML = coutSign2; getEleById("num3").innerHTML = numx; var num = Math.floor(Math.random()*3); num = num.toString(10); if(num == 0) { } if(num == 1) { getEleById("bracket1left").innerHTML = "("; getEleById("bracket1right").innerHTML = ")"; if((getEleById("bracket2left").innerHTML == "(" && getEleById("bracket1right").innerHTML == ")") ||(getEleById("bracket2right").innerHTML == ")" && getEleById("bracket1right").innerHTML == ")")) { getEleById("bracket1left").innerHTML = ""; getEleById("bracket1right").innerHTML = ""; getEleById("bracket2left").innerHTML = ""; getEleById("bracket2right").innerHTML = ""; } } if(num == 2) { getEleById("bracket2left").innerHTML = "("; getEleById("bracket2right").innerHTML = ")"; if(getEleById("bracket2left").innerHTML == "(" && getEleById("bracket1right").innerHTML == ")" ||(getEleById("bracket2right").innerHTML == ")" && getEleById("bracket1right").innerHTML == ")")) { getEleById("bracket1left").innerHTML = ""; getEleById("bracket1right").innerHTML = ""; getEleById("bracket2left").innerHTML = ""; getEleById("bracketright").innerHTML = ""; } } getEleById("answer").foucs(); } getEleById("btnAns").onclick = function() { if(getEleById("answer").value=="" || isNaN(getEleById("answer").value)) { alert("请输入数字"); getEleById("answer").value = ""; getEleById("answer").foucs(); return; } this.style.display = "none"; getEleById("btnNext").style.display = "inline"; if(getEleById("bracket1left").innerHTML == "" && getEleById("bracket2left").innerHTML == "") { var result = eval(numa+coutSign1+numb+coutSign2+numx); } if(getEleById("bracket1left").innerHTML == "(") { var result = eval('('+numa+coutSign1+numb+')'+coutSign2+numx); } if(getEleById("bracket2left").innerHTML == "(") { var result = eval(numa+coutSign1+'('+numb+coutSign2+numx+')'); } var isRight = false; if(/^[-]{0,1}[0-9]{1,}$/.test(result)) { if(result == parseInt(getEleById("answer").value)) isRight = true; } else { result = result.toFixed(1); var ans = parseFloat(getEleById("answer").value); getEleById("answer").value = ans; if(result - getEleById("answer") < 0.01) { isRight = true; } } if(isRight == true) { getEleById("sans").innerHTML = "答对了!"; } else { getEleById("sans").innerHTML = "答错了!正确答案是:"+result.toString()+"。"; } } document.body.onload = function() { getEleById("btnNext").onclick(); } document.body.onkeyup = function() { if(13 == event.keyCode) { if(getEleById("btnAns").style.display == "none") { getEleById("btnNext").onclick(); } else { getEleById("btnAns").onclick(); } } } </script> </body> </html>
运行结果截图：
编程总结：对于html的使用更加了熟悉。