zoukankan html css js c++ java

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>

运行截图

查看全文

相关阅读:
同时使用gitee和github
vim的四种模式及模式切换
 Vim使用入门
 Vim, Vim Diff, Vim Easy, Vim Read-only 区别
 公钥与私钥
 Linux使用Aria2命令下载BT种子/磁力/直链文件
 Content-Type /AJAX /@ResponseBody
IDEA 添加serialVersionUID 检查
 Servlet中的Context Path | Servlet Path | Path Info
第K大的数

原文地址：https://www.cnblogs.com/MoooJL/p/11787401.html