软件工程个人项目一：四则运算器

最新推荐文章于 2024-07-18 16:29:57 发布

dijiu1504

最新推荐文章于 2024-07-18 16:29:57 发布

阅读量195

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/Z--Y/p/7525807.html

版权

1.代码来源：询问了高中时的好朋友，他给我讲解了计时器的写法，然后在他的指导下，自己摸索着写下了其他的功能。

2.platform：windows

language：java script，html5

3.bug：暂时是计数器的问题，会变成负数

4.Fuction improvement：加上了计时器，会判断对错，累计分数，支持多个运算符。

5.代码如下：

<!DOCTYPE html>                             
<html>                                      //HTML5写的，标签
    <head>                                  //head标签
        <meta charset="UTF-8">              //编码格式
        <title></title>                     //标题
        <style>                             //设置
            /*主面板设置*/
            .Main{                      //div的类，面板，设置长宽
                height: 50%;              
                width: 40%;
                background: paleturquoise;     //背景颜色
                position: absolute;        //绝对位置
                left: 30%;                 
            }
            /*包含输入文本框的面版的设置*/
            .article{
                height: 20%;
                width: 80%;
                background: red;
                position: absolute;
                left: 10%;
                display: none;   //不显示
            }
            /*点我出题的按钮的设置*/
            .button2{
                position: absolute;
                bottom: 4%;
                right: 20%;
            }
            /*确认的按钮的设置*/
            .button1{
                position: absolute;
                top: 20%;
                right: 20%;
                display: none;
            }
            /*显示时间的面版的设置*/
            .time{
                position: absolute;
                height: 15%;
                width: 15%;
                background: palevioletred;
                top: 45%;
                left: 20%;
                display: none;
                text-align: center;
            }
            /*显示分数的面版的设置*/
            .score{
                position: absolute;
                height: 15%;
                width: 15%;
                background: palevioletred;
                top: 45%;
                left: 65%;
                display: none;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--主面版-->
        <div class="Main">               //划了一块地
            <div style="text-align: center;"><h3>来看看你能拿多少分吧</h3></div>
            <!--包含输入文本框的面版-->
            <div class="article" id="id_article">//在地里再划分
                <div>            
                    <input type="text" id="text1" style="width: 40px;text-align: center;" readonly="readonly"/>   //标签
                    <input type="text" id="text2" style="width: 40px;text-align: center;" readonly="readonly"/>
                    <input type="text" id="text3" style="width: 40px;text-align: center;" readonly="readonly"/>
                    <input type="text" style="width: 40px;text-align: center;" readonly="readonly" value="="/>
                    <input type="text" id="text4" style="width: 40px;text-align: center;"/>
                </div>
            </div>
            <!--时间计时-->
            <div class="time" id="id_time">        //class 是一个类
                时间还剩：<div id="time_number">
                </div>
            </div>
            <!--分数累积-->
            <div class="score" id="id_score">
                已得分数：<div id="score_number">
                </div>
            </div>
            <!--按钮设置-->
            <div class="button2">          //划分在sytle里，已有长宽高
                <input type="button" value="点我出题" 
                    style="color: whitesmoke;background: deepskyblue;" id="id_button" οnclick="creat1()">
            </div>
            <!--按钮设置-->
            <div class="button1" id="button1">
                <input type="button" value="确认" 
                    style="color: whitesmoke;background: deepskyblue;" id="id_button" οnclick="makesure()">
            </div>
        </div>
        <script>                    //脚本语言，支持动态效果
            var number1,number2,Symbol;
            var i = 300;
            //点我出题的按钮用的方法
            function creat1(){
                //点击按钮显示包含输入文本框的面版
                var aa = document.getElementById("id_article");
                aa.style.display="block";           //block将其显示出来
                var bb = document.getElementById("id_time");
                bb.style.display="block";
                var cc = document.getElementById("id_score");
                cc.style.display="block";
                var ee = document.getElementById("button1");
                ee.style.display="block";
                //随机数字的值
                var a = document.getElementById("text1");  //相当于int
                number1 = Math.floor(Math.random()*100);
                a.value=number1;
                
                var b = document.getElementById("text3");
                number2 = Math.floor(Math.random()*100);   //floor是整数
                b.value=number2;
                //随机运算符
                var c = document.getElementById("text2");
                Symbol = Math.floor(Math.random()*10);
                if (Symbol >= 0 &&Symbol < 2.5){
                    Symbol = '+';
                }
                if (Symbol > 2.5 &&Symbol <= 5){
                    Symbol = '-';
                }
                if (Symbol > 5 &&Symbol < 7.5){
                    Symbol = 'x';
                }
                if (Symbol > 7.5 &&Symbol < 10){
                    Symbol = '/';
                }
                c.value=Symbol;
                
                //计时
                if (i == 300){
                    setInterval(function(){
                    var cc = document.getElementById("time_number");
                    cc.innerHTML= i +"s";      //s是秒
                    i--;
                    },1000);
                }
                
            }
            //确认按钮所调用的方法
            var number = 0;
            function makesure(){
                var d = document.getElementById("text4");
                var result;
                var j = 0;
                var number3 = d.value;
                //加法运算结果判断
                if(Symbol == '+'){
                    result=number1+number2;
                    if(parseInt(number3) == result)
                    {
                        alert("结果正确");     //alert是弹窗
                        d.value="";
                        j++;
                    }
                    else{
                        alert("结果错误");
                        d.value="";
                    }
                }
                //减法运算结果判断
                if(Symbol == '-'){
                    result=number1-number2;
                    if(parseInt(number3) == result)
                    {
                        alert("结果正确");
                        d.value="";
                        j++;
                    }
                    else{
                        alert("结果错误");
                        d.value="";
                    }
                }
                //乘法运算结果判断
                if(Symbol == 'x'){
                    result=number1*number2;
                    if(parseInt(number3) == result)
                    {
                        alert("结果正确");
                        d.value="";
                        j++;
                    }
                    else{
                        alert("结果错误");
                        d.value="";
                    }
                }
                //除法运算结果判断
                if(Symbol == '/'){
                    result=number1/number2;
                    if(parseInt(number3) == result)
                    {
                        alert("结果正确");
                        d.value="";
                        j++;
                    }
                    else{
                        alert("结果错误");
                        d.value="";
                    }
                }
                
                //得分
                var dd = document.getElementById("score_number");
                number = number + j * 5;
                dd.innerHTML=number;
                
                var aa = document.getElementById("id_article");
                aa.style.display="block";
                var bb = document.getElementById("id_time");
                bb.style.display="block";
                var cc = document.getElementById("id_score");
                cc.style.display="block";
                
                var a = document.getElementById("text1");
                number1 = Math.floor(Math.random()*100);
                a.value=number1;
                
                var b = document.getElementById("text3");
                number2 = Math.floor(Math.random()*100);
                b.value=number2;
                
                var c = document.getElementById("text2");
                Symbol = Math.floor(Math.random()*10);
                if (Symbol >= 0 &&Symbol < 2.5){
                    Symbol = '+';
                }
                if (Symbol > 2.5 &&Symbol <= 5){
                    Symbol = '-';
                }
                if (Symbol > 5 &&Symbol < 7.5){
                    Symbol = 'x';
                }
                if (Symbol > 7.5 &&Symbol < 10){
                    Symbol = '/';
                }
                c.value=Symbol;
            }
        </script>
    </body                  
</html>

6.GitHub的网址如下：

https://github.com/I-December/December

转载于:https://www.cnblogs.com/Z--Y/p/7525807.html

dijiu1504

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
软件工程个人项目一：四则运算器

1.代码来源：询问了高中时的好朋友，他给我讲解了计时器的写法，然后在他的指导下，自己摸索着写下了其他的功能。2.platform：windowslanguage：java script，html53.bug：暂时是计数器的问题，会变成负数4.Fuction improvement：加上了计时器，会判断对错，累计分数，支持多个运算符。5.代码如下：<!DO...
复制链接

扫一扫