Javaweb四则运算出题器
题目要求：
1、用户可以自己输入题目数量和每行题目个数
2、可实现在线答题和判题功能。
3、生成的题目中，减法的结果不能为负数，乘法不允许结果大于100，除法必须能够整除。
程序代码：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <style> .btnbag{ width:100%; text-align:center; } .btn{ width:150px; height:40px; border:0px; border-radius:5px; background-color:orange; color:black; margin-left:auto; margin-top:10px } </style> <body> <h4>题目总数量</h4> <div><input type="text" class="form-control" id="num"></div> <h4>每行题目个数</h4> <div><input type="text" class="form-control" id="hnum"></div> <div class="btnbag"> <input type="button" class="btn" value="开始答题" onclick="submit()"> </div> </body> <script> function submit() { var num=$("#num").val(); var hnum=$("#hnum").val(); if(num!=""&&hnum!=""){ localStorage.setItem("num",num); localStorage.setItem("hnum",hnum); location.href="show.html"; }else{ alert("错误"); } } </script> </html>
show.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <style> .btnbag{ width:100%; text-align:center; } .btn{ width:150px; height:40px; border:0px; border-radius:5px; background-color:orange; color:black; margin-left:auto; margin-top:10px } </style> <script> $(function () { var x=localStorage.getItem("num"); var h=localStorage.getItem("hnum"); //alert(num+hnum); var timu =new Array(x); var daan=new Array(x); for(var i=0;i<x;){ var num1=Math.round(Math.random()*99 + 1) var num2=Math.round(Math.random()*99 + 1) var k=Math.round(Math.random()*3 + 1); if(k==1) { timu[i]=num1+"+"+num2+"="; daan[i]=num1+num2+""; i++; } else if(k==2&&num1>=num2) { timu[i]=num1+"-"+num2+"="; daan[i]=num1-num2+""; i++; } else if(k==3&&num1*num2<100) { timu[i]=num1+"*"+num2+"="; daan[i]=num1*num2+""; i++; } else if(k==4&&num2!=0&&num1%num2==0) { timu[i]=num1+"/"+num2+"="; daan[i]=num1/num2+""; i++; } else continue; } //alert(timu[1]+daan[1]); localStorage.setItem('timu',JSON.stringify(timu)); localStorage.setItem('daan',JSON.stringify(daan)); var text="<table align='center'>" var k; for(var j=0;j<x;) { k = 0; text += "<tr>"; while (k < h) { text += "<td>"+timu[j]+"</td>" + " <td><input type='hidden' name='timu' value='"+timu[j]+"'></td>" + " <td><input type='text' name='jieguo' id='jieguo"+j+"'/></td>" + " <td><input type='hidden' name='daan' value='"+daan[j]+"'></td>"; j++; k++; if(j>=x) break; } text+="</tr>"; } text+="</table>"; $(".timus").html(text); }); function submit() { var x=localStorage.getItem("num"); var jieguo=new Array(x); for (var i=0;i<x;i++){ jieguo[i]=$("#jieguo"+i).val(); } //alert(jieguo[0]+jieguo[1]+jieguo[2]+jieguo[3]); localStorage.setItem('jieguo',JSON.stringify(jieguo)); location.href="result.html"; } </script> <body> <h2 align="center" >题目如下</h2> <div class="timus"></div> <div class="btnbag"> <input type="button" class="btn" value="提交結果" onclick="submit()"> </div> </body> </html>
result.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <script> $(function () { jieguo = JSON.parse(localStorage.getItem('jieguo')); timu = JSON.parse(localStorage.getItem('timu')); daan = JSON.parse(localStorage.getItem('daan')); var a=0; var b=0; //alert(jieguo); for (var i=0;i<timu.length;i++){ if(jieguo[i]==daan[i]){ var text="<p align='center' style='color: green;'>'"+timu[i]+"' 回答正确</p>"; $("#result").append(text); a++; } else { var text="<p align='center' style='color: red;'>'"+timu[i]+jieguo[i]+"' 回答错误</p>"; $("#result").append(text); b++; } } var con="<h2 align='center'>总共"+timu.length+"道题，回答正确"+a+"道，回答有误"+b+"道</h2>" $("#con").html(con); }) function submit() { location.href="index.html"; } </script> <style> .btnbag{ width:100%; text-align:center; } .btn{ width:150px; height:40px; border:0px; border-radius:5px; background-color:orange; color:black; margin-left:auto; margin-top:10px } </style> <body> <div id="result"></div> <div id="con"></div> <div class="btnbag"> <input type="button" class="btn" value="继续答题" onclick="submit()"> </div> </body> </html>
运行截图
