zoukankan      html  css  js  c++  java
  • 四则运算出题网页

    一、PSP计划

    Personal Software Process Stages

    Time

    计划

    60min

    预想任务完成的时间和流程

    60min

    需求分析 (包括学习新技术)

    48h

    开发

    48h

    生成设计文档

    100min

    设计复审 (审核设计文档)

    30min

    代码规范 (为目前的开发制定合适的规范)

    30min

    具体设计

    240min

    具体编码

    48h

    代码复审

    120min

    测试(自我测试,修改代码,提交修改)

    300min

    完成实验测试报告

    150min

    总结并提出过程改进计划

    60min


    二、项目
     

     1.1 项目环境

      名称:“四则运算出题网页”

      语言:JavaScript

      工具:电脑

      平台:sublime text 3

     

     1.2 实验代码流程图以及代码运行结果等

      Html代码:

      fourArithmetic.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>四则运算测试题</title>
        <link rel="stylesheet" type="text/css" href="pageFormat.css" />
    </head>
    <body>
    <div class="paper" id="paper">
        <h1 class="Title" style="margin-left: 20px;">四则运算测试题</h1>
        <h2 class="describle">考点:100以内的四则运算(除法运算小数点后保留两位有效数字)</h2>
    
        <h3 class="describle">&nbsp;&nbsp;满分:100分(10分/题)&nbsp;&nbsp;题量:10题</h3>
        <div class="details">
            <input type="text" readonly="true" value="姓名:" class="points1">
            <input type="text" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" class="nameInput" id="studentName">
            <input type="text" readonly="true" value="班级:" class="points1">
            <input type="text" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" class="classInput" id="studentClass">
            <input type="text" readonly="true" value="得分:" class="points1">
            <input type="text" readonly="true" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分 " id="point" class="points2">
        </div>
        <div class="questions">
            <div class="p1">
            <div class="problem" >
                <input type="text" readonly="true" value="1." class="number" id="xuhao1">
                <input type="text" readonly="true" value="15" class="number" id="firstNum1">
                <input type="text" readonly="true" value="+" class="number" id="firstFu1">
                <input type="text" readonly="true" value="21" class="number" id="firstNum2">
                <input type="text" readonly="true" value="=" class="number" id="equal1">
                <input type="text" value="" class="numberInput" id="firstNum3">
            </div>
            <div class="problem">
                <input type="text" readonly="true" value="2." class="number" id="xuhao2">
                <input type="text" readonly="true" value="15" class="number" id="secondNum1">
                <input type="text" readonly="true" value="+" class="number" id="secondFu1">
                <input type="text" readonly="true" value="21" class="number" id="secondNum2">
                <input type="text" readonly="true" value="=" class="number" id="equal2">
                <input type="text"  value="" class="numberInput" id="secondNum3">
            </div>
            <div class="problem">
                <input type="text" readonly="true" value="3." class="number" id="xuhao3">
                <input type="text" readonly="true" value="15" class="number" id="thirdNum1">
                <input type="text" readonly="true" value="+" class="number" id="thirdFu1">
                <input type="text" readonly="true" value="21" class="number" id="thirdNum2">
                <input type="text" readonly="true" value="=" class="number" id="equal3">
                <input type="text"  value="" class="numberInput" id="thirdNum3">
            </div>
            <div class="problem">
                <input type="text" readonly="true" value="4." class="number" id="xuhao4">
                <input type="text" readonly="true" value="15" class="number" id="fourthNum1">
                <input type="text" readonly="true" value="+" class="number" id="fourthFu1">
                <input type="text" readonly="true" value="21" class="number" id="fourthNum2">
                <input type="text" readonly="true" value="=" class="number" id="equal4">
                <input type="text"  value="" class="numberInput" id="fourthNum3">
            </div>
            <div class="problem">
                <input type="text" readonly="true" value="5." class="number" id="xuhao5">
                <input type="text" readonly="true" value="15" class="number" id="fifthNum1">
                <input type="text" readonly="true" value="+" class="number" id="fifthFu1">
                <input type="text" readonly="true" value="21" class="number" id="fifthNum2">
                <input type="text" readonly="true" value="=" class="number" id="equal5">
                <input type="text"  value="" class="numberInput" id="fifthNum3">
            </div>
            <div class="problem">
                <input type="text" readonly="true" value="6." class="number" id="xuhao6">
                <input type="text" readonly="true" value="15" class="number" id="sixthNum1">
                <input type="text" readonly="true" value="+" class="number" id="sixthFu1">
                <input type="text" readonly="true" value="21" class="number" id="sixthNum2">
                <input type="text" readonly="true" value="=" class="number" id="equal6">
                <input type="text"  value="" class="numberInput" id="sixthNum3">
            </div>
            <div class="problem">
                <input type="text" readonly="true" value="7." class="number" id="xuhao7">
                <input type="text" readonly="true" value="15" class="number" id="seventhNum1">
                <input type="text" readonly="true" value="+" class="number" id="seventhFu1">
                <input type="text" readonly="true" value="21" class="number" id="seventhNum2">
                <input type="text" readonly="true" value="=" class="number" id="equal7">
                <input type="text"  value="" class="numberInput" id="seventhNum3">
            </div>
            <div class="problem">
                <input type="text" readonly="true" value="8." class="number" id="xuhao8">
                <input type="text" readonly="true" value="15" class="number" id="eighthNum1">
                <input type="text" readonly="true" value="+" class="number" id="eighthFu1">
                <input type="text" readonly="true" value="21" class="number" id="eighthNum2">
                <input type="text" readonly="true" value="=" class="number" id="equal8">
                <input type="text"  value="" class="numberInput" id="eighthNum3">
            </div>
            <div class="problem">
                <input type="text" readonly="true" value="9." class="number" id="xuhao9">
                <input type="text" readonly="true" value="15" class="number" id="ninthNum1">
                <input type="text" readonly="true" value="+" class="number" id="ninthFu1">
                <input type="text" readonly="true" value="21" class="number" id="ninthNum2">
                <input type="text" readonly="true" value="=" class="number" id="equal9">
                <input type="text" value="" class="numberInput" id="ninthNum3">
            </div>
            <div class="problem">
                <input type="text" readonly="true" value="10." class="number" id="xuhao10">
                <input type="text" readonly="true" value="15" class="number" id="tenthNum1">
                <input type="text" readonly="true" value="+" class="number" id="tenthFu1">
                <input type="text" readonly="true" value="21" class="number" id="tenthNum2">
                <input type="text" readonly="true" value="=" class="number" id="equal10">
                <input type="text" value="" class="numberInput" id="tenthNum3">
            </div>
            </div>
            <div class="p2">
                <img class="img" src="white.jpg" id="img1">
                <img class="img" src="white.jpg" id="img2">
                <img class="img" src="white.jpg" id="img3">
                <img class="img" src="white.jpg" id="img4">
                <img class="img" src="white.jpg" id="img5">
                <img class="img" src="white.jpg" id="img6">
                <img class="img" src="white.jpg" id="img7">
                <img class="img" src="white.jpg" id="img8">
                <img class="img" src="white.jpg" id="img9">
                <img class="img" src="white.jpg" id="img10">
            </div>
            <div class="p3">
                <input type="text" value="" class="answer" id="firstAnswer">
                <input type="text" value="" class="answer" id="secondAnswer">
                <input type="text" value="" class="answer" id="thirdAnswer">
                <input type="text" value="" class="answer" id="fourthAnswer">
                <input type="text" value="" class="answer" id="fifthAnswer">
                <input type="text" value="" class="answer" id="sixthAnswer">
                <input type="text" value="" class="answer" id="seventhAnswer">
                <input type="text" value="" class="answer" id="eighthAnswer">
                <input type="text" value="" class="answer" id="ninthAnswer">
                <input type="text" value="" class="answer" id="tenthAnswer">
            </div>
    
            <button type="button" id="Submit" onclick="information();getResult()">提交</button>
        </div>
        
    
    </div>
    </body>
    <script type="text/javascript">
            var min=0;
            var max=100;
            document.getElementById("firstNum1").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("firstNum2").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("secondNum1").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("secondNum2").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("thirdNum1").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("thirdNum2").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("fourthNum1").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("fourthNum2").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("fifthNum1").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("fifthNum2").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("sixthNum1").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("sixthNum2").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("seventhNum1").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("seventhNum2").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("eighthNum1").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("eighthNum2").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("ninthNum1").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("ninthNum2").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("tenthNum1").value=Math.floor(Math.random() * (max - min)) + min;
            document.getElementById("tenthNum2").value=Math.floor(Math.random() * (max - min)) + min;
            var fuhao=new Array();
            var maxx=4;
            var minn=0;
            fuhao[0]="+";
            fuhao[1]="-";
            fuhao[2]="×";
            fuhao[3]="÷";
            var n=new Array();
            n[0]="first";
            n[1]="second";
            n[2]="third";
            n[3]="fourth";
            n[4]="fifth";
            n[5]="sixth";
            n[6]="seventh";
            n[7]="eighth";
            n[8]="ninth";
            n[9]="tenth";
            for(var i=0;i<=9;i++)
                document.getElementById(n[i] +"Fu1").value=fuhao[Math.floor(Math.random() * (maxx- minn)) + minn];
            function information(){
                alert("您已成功提交试卷!");
            }
            function getResult() {
                 var sumPoints=0;
                 for(var i=0;i<=9;i++)
                 {
                     var p=true;
                     if(document.getElementById(n[i]+"Fu1").value=="+"){
                         if(Number(document.getElementById(n[i]+"Num1").value)+Number(document.getElementById(n[i]+"Num2").value)==Number(document.getElementById(n[i]+"Num3").value) ){
                             document.getElementById(n[i]+"Num3").style.border="1px solid red";
                             sumPoints+=10;
                             p=true;
                         }
                         else
                         {
                             p=false;
    
                             document.getElementById(n[i]+"Answer").value=Number(document.getElementById(n[i]+"Num1").value)+Number(document.getElementById(n[i]+"Num2").value);
    
                             document.getElementById(n[i]+"Num3").style.border="1px solid black";
                         }
                     }
                     else if(document.getElementById(n[i]+"Fu1").value=="-") {
                         var pan = 0;
                         var s = document.getElementById(n[i] + "Num3").value.match(/d+/g);
                         if (Number(s)>=10&&Number(s)<100)
                             pan = 2;
                         else if (Number(s)>0&&Number(s)<10)
                             pan = 1;
                         else
                             pan = 0;
                         if (pan == document.getElementById(n[i] + "Num3").value.length) {
                             if (Number(document.getElementById(n[i] + "Num1").value) - Number(document.getElementById(n[i] + "Num2").value) == Number(s)) {
                                 document.getElementById(n[i] + "Num3").style.border = "1px solid red";
                                 sumPoints+=10;
                                 p=true;
                             }
                             else
                             {
                                 p=false;
                                 document.getElementById(n[i]+"Answer").value=Number(document.getElementById(n[i]+"Num1").value)-Number(document.getElementById(n[i]+"Num2").value);
                                 document.getElementById(n[i] + "Num3").style.border = "1px solid black";
                             }
                         }
                         else {
                             if (Number(document.getElementById(n[i] + "Num1").value) - Number(document.getElementById(n[i] + "Num2").value) ==0- Number(s)) {
                                 document.getElementById(n[i] + "Num3").style.border = "1px solid red";
                                 sumPoints+=10;
                                 p=true;
                             } else
                             {
                                 p=false;
                                 document.getElementById(n[i] + "Num3").style.border = "1px solid black";
                             }
                         }
                     }
                     else if(document.getElementById(n[i]+"Fu1").value=="×"){
                         if(Number(document.getElementById(n[i]+"Num1").value)*Number(document.getElementById(n[i]+"Num2").value)==Number(document.getElementById(n[i]+"Num3").value)){
                             document.getElementById(n[i]+"Num3").style.border="1px solid red";
                             sumPoints+=10;
                             p=true;
                         }
                         else
                         {
                             p=false;
                             document.getElementById(n[i]+"Answer").value=Number(document.getElementById(n[i]+"Num1").value)*Number(document.getElementById(n[i]+"Num2").value);
                             document.getElementById(n[i]+"Num3").style.border="1px solid black";
                         }
                     }
                     else if(document.getElementById(n[i]+"Fu1").value=="÷"){
                         if((Number(document.getElementById(n[i]+"Num1").value)/Number(document.getElementById(n[i]+"Num2").value)).toFixed(2)==Number(document.getElementById(n[i]+"Num3").value)){
                             document.getElementById(n[i]+"Num3").style.border="1px solid red";
                             sumPoints+=10;
                             p=true;
                         }
                         else
                         {
                             p=false;
                             document.getElementById(n[i]+"Answer").value=Number(document.getElementById(n[i]+"Num1").value)/Number(document.getElementById(n[i]+"Num2").value);
                             document.getElementById(n[i]+"Num3").style.border="1px solid black";
                         }
                     }
                     if(p==true)
                     {
                         console.log("true");
                         document.getElementById("img"+String(1+i)).src="true.jpg";
                     }
                     else
                     {
                         console.log("false");
                         document.getElementById("img"+String(1+i)).src="false.jpg";
                     }
                 }
    
                 document.getElementById("point").value=sumPoints+"";
                 document.getElementById("point").style.color="red";
                alert("您的最终得分为"+String(sumPoints)+"分,答对"+String(sumPoints/10)+"道,"+"答错"+String(10-sumPoints/10)+"");
            }
    </script>
    </html>
    View Code

      pageFormat.css

    .paper{
        width: 900px;
        height: 950px;
        border: 10px solid gray;
        margin:auto;
        background-image: url("background.jpg");
        background-size:100% 100%;
    }
    .Title{
        text-align: center;
        font-family: 楷体;
        font-size: 40px;
        width: 900px;
        margin-top: 10px;
        margin-right: auto;
        margin-left: auto;
    }
    .describle{
        text-align: center;
        font-family: 楷体;
        font-size: 20px;
        width: 900px;
        margin-top: 30px;
        margin-right: auto;
        margin-left: auto;
    }
    .details{
        width: 600px;
        height: 50px;
        background: white;
        margin-right: auto;
        margin-left: auto;
    }
    .nameInput{
        background: #FFFFFF;
        width:110px;
        height: 100%;
        float: left;
        font-family: 楷体;
        margin-left: 0px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        outline:none;
        border:0px;
        text-decoration:underline;
    }
    
    .classInput{
        background: #FFFFFF;
        width:130px;
        height: 100%;
        float: left;
        font-family: 楷体;
        margin-left: 0px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        outline:none;
        border:0px;
        text-decoration:underline;
    }
    .points1{
        background: #FFFFFF;
        width: 60px;
        height: 100%;
        float: left;
        text-align:left;
        outline:none;
        font-size: 20px;
        margin-left: 0px;;
        font-family: 楷体;
        font-weight: bold;
        border:0px;
    }
    .points2 {
        background: #FFFFFF;
        width:110px;
        float: right;
        font-size: 20px;
        font-family: 楷体;
        font-weight: bold;
        margin-right: 25px;
        height: 100%;
        text-align: right;
        outline:none;
        border:0px;
        text-decoration:underline;
    }
    .questions{
        width: 900px;
        height: 715px;
        margin-top: 10px;
        margin-left:auto;
        margin-right: auto;
        border:1px dashed #F00;
    }
    .p1{
        margin-top: 10px;
        height: 600px;
        float:left;
        width: 450px;
        border: none;
    }
    .p2{
        margin-top: 42px;
        height: 600px;
        float: right;
        width: 300px;
        border: none;
    }
    .p3{
        margin-top: 40px;
        height: 10px;
        float: right;
        width: 10px;
        border: none;
    }
    .answer {
        background: #FFFFFF;
        width:100px;
        color: red;
        margin-left: 200px;
        font-size: 20px;
        font-family: 楷体;
        font-weight: bold;
        height: 58px;
        text-align: center;
        outline:none;
        border:0px;
        text-decoration:underline;
    }
    .other{
        height: 50px;
        margin-top: 20px;
    }
    .problem{
        width:300px;
        height: 50px;
        border: 0px;
        margin-top:12px ;
        margin-left: 50px;
    }
    .img{
        width:150px;
        height: 55px;
        border: 0px;
        margin-right: 400px;
        margin-top:0px ;
    }
    .number{
        width:35px;
        height: 42px;
        border: none;
        margin-left: 0px;
        margin-top:15px ;
        text-align: center;
        font-size: 25px;
        outline:none;
    }
    .numberInput{
        width:70px;
        height: 40px;
        float: right;
        border: 1px solid deepskyblue;    
        margin-top:15px ;
        text-align: center;
        font-size: 25px;
    }
    #Submit{
        width: 100px;
        height: 30px;
        margin-left: 400px;
        margin-top: 50px;
        font-size: 20px;
        text-align: center;
        font-family: 楷体;
        font-weight: bold;
    }
    View Code

     1.3 网页图片(网页背景水印、判断对错):

                                                                                                                         

     1.4 运行结果(网页端):

     1.4.1 输入姓名、班级,进行作答

       1.4.2 提交答案

       1.4.3 查看分数以及答案

  • 相关阅读:
    (73)C# 扩展方法
    网络
    (十九)守护进程
    (十二)函数返回局部变量
    (十八)WireShark 过滤语法
    (十七)linux网络命令 vconfig ifconfig
    (十六)getsockname()
    (十五)ioctl、ifreq、ifconf
    (十四)UDP协议的两个主要方法sendto和recvfrom详解
    (十三)Packet socket 和 sockaddr_ll
  • 原文地址:https://www.cnblogs.com/nicaihui/p/15319054.html
Copyright © 2011-2022 走看看