js实现四则混合运算计算器 – 真·铁头娃

js实现四则混合运算计算器 – 真·铁头娃

近似,据我看来用JS来演奏单独复杂的反向移动。,简直互联网网络上的绝大多数样本都是从左t直率的计算出狱的。,就仿佛1+2*5,率先计算。1+2,再计算3*5,运营商的第一流的无了解。,这是了解这一目的的一种办法。,让我总结一下。。但这简直最根本的思惟办法。,有很多详细资料不使完美。。

在处置根本塑造规划和共有的逻辑在前方,we的领地格形式先来处置四则混合运算的心模块,更确切地说,多少将输出的字母行交换为数值表现和CA。:

我达到知识的办法叫做逆波兰表现(也称后缀)。,计划说得中肯逆波兰表现的详细解释,可以搜索T,大约概念必然要对比地复杂。。

在这里we的领地格形式举办单独样本来阐明逆波兰Exp的重大聚会。:

诸如:3+4*5 ,大约表现率先是多少了解乘法表现的呢?

简直把它形状大约表现,再看一遍。:

3,4,5,*,+,因而出现复杂多了。,提供冲突推拿符,计算前两个推拿数。,将运算表现交换为运算算是直到终极R,这相反地复杂。,让we的领地格形式来看一眼大约样本。

3,4,5,*,+  ->  3,20,+ ->  23

这么we的领地格形式多少熟习呢?3+4*5  形状牛波兰表现?

你也可以在网上搜索。,在这里我举办了单独挽住。:

由于逆波兰表现的表现解析器

为了帮忙你如何阅读文字。,在这里是文字的心相称(即交换规定):

      由于SIM的逆波兰表现传播解析算法,这是we的领地格形式的表现剖析和使生效的根底。:

       1. 达到两个栈推拿数(推拿数堆栈)和运算符(推拿符堆栈)。

      2。扫描事先安排的字母行。,即使你接到单独数字,渗出(扫描是单独数字)。,一定要渗出单独满的的数(推拿数)。,那时将推拿数压入推拿数堆栈中。。

       3. 即使你接到单独推拿符,比方 或,下面用B替代。,您需求对比地推拿符堆栈堆栈的顶部元素(运用:

              1) 即使A不在,将B压入推拿符堆栈中。;

             2)即使B是左圆括号。,疏忽A和B当说得中肯第一流的对比地。,将B压入推拿符堆栈。

             3)即使B是右圆括号。,按挨次促使发生推拿符堆栈。,那时,将被突然拿出来的元素序列紧缩到推拿数栈中。,堆栈的顶部是左圆括号。,圆括号不参加推拿数堆栈中。。

             4)即使A是左圆括号。,B直率的压入推拿符堆栈中。。

             5)即使B第一流的高于A。,B直率的压入推拿符堆栈中。。

             6)即使B第一流的小于或使相等第一流的。,那时将A从堆栈中推出狱并压入推拿数堆栈。,反复此诉讼程序直到堆栈顶部以B第一流的为先。

      4。扫描做完后。,堆栈堆栈的元素堆栈。,那时转移将其压入推拿数堆栈中。。

可是做错很 忧虑基谐波,简直逐步地地,你可以接到逆波兰表现。。在这里,we的领地格形式通常在开端时按下单独推拿符。,并将其第一流的设置为极小值。,这使得否则运营商更轻易停止对比地。。

现时we的领地格形式来认真思考一下。:为了接到逆波兰表现,we的领地格形式需求以下诉讼程序。:

1。将字母行交换为一大批,在折合褶皱中,推拿数和算符应分岔。,直率的推拿字母行,会有有毛病的的。,诸如:

3+20 将讲解成: 3,+,2,0

2。向一大批中添加单独。,容易地对比地的推拿符。

三。由于下面举办的规定停止编码以达到推拿一大批。

率先是字母行的交换。:

这是据我看来想出的单独愚笨的办法。,执意在推拿者的安博加单独分岔器。,使成粉末是由于这种分岔器。。必然要有更复杂的办法。,你可以在评论区议论大约成绩。。

   var operand = [], //用于存储器推拿数的堆栈
        operator = [], //用于存储器推拿符的堆栈
        textArr = (''''),
        newTextArr = [],
        calTextArr = []; //用于存储器推拿数和运算符的一大批。。for(var i = 0; i < textArr.length; i++){
            if(!数字(说法)
                ("|",课文[I],"|");
            }
            else{
                (textArr[i]);
            }
        }
        calTextArr = ('')劈开);
        ("#")

那时思考规定逐步地地停止。,简直有单独。操作第一流的性的对比地we的领地格形式还无处置。

操作第一流的性的对比地


在这里we的领地格形式每个推拿符的第一流的用数字表现,即CL。。

/*
对比地推拿符第一流的
*param string 需求交换的字母行
*/function compareOperator(a,b){
    var aLevel = getOperatorRand(a),
        B级 = getOperatorRand(b);

        if(哈勒维) <= B级){
            returntrue;
        }
        elseif(哈勒维) > B级){
            returnfalse;
        }
}

/*
运营商的第一流的被量子化。
*/function getOperatorRand(推拿员)
    switch(推拿员)
        case "#":
            return 0;
        case "+":
            return 1;
        break;
        case "-":
            return 1;
        break;
        case "*":
            return 2;
        break;
        case "/":
            return 2;
        break;
    }
}

 操作第一流的性的对比地成绩也早已处置了,那时可以接到逆波兰表现。:

获取逆波兰表现(在内的说法是要交换的字母行):

function getRPN(text){
    var operand = [], //用于存储器推拿数的堆栈
        operator = [], //用于存储器推拿符的堆栈
        textArr = (''''),
        newTextArr = [];
for(var i = 0; i < textArr.length; i++){ if(!Number(课文[I]) && Number(课文[I]) != 0){ ("|",课文[I],"|"); } else{ (textArr[i]); } } var calTextArr = ('')劈开); ("#") for(var i = 0; i < calTextArr.length; i++){ //即使数字直率的进入堆栈。 即使(数字(CaltTrrr[i]) || 数字(CaltTrrr) == 0){ (calTextArr[i]); } //即使是推拿员,则思考形形色色的的限制停止推拿。else { switch(true){ //即使推拿符堆栈的顶部是()),或许遍历的推拿符是())case calTextArr[i] == "(" && (-1)[0] == "(": (calTextArr[i]); break; /*即使遍历到的推拿符是“)”则把operator说得中肯推拿符转移突然拿出来并压入 推拿数说得中肯顶部运算符直到推拿符堆栈,那时,()也突然拿出来。,简直它无压上。 operand栈中 */case calTextArr[i] == ")": do{ (()); }while((-1)[0] != "("); (); break; //即使是否则推拿符,那时在对比地第一流的继使生效推拿。default: var compare = compareOperator(calTextArr[i],(-1)[0]); var a = calTextArr[i]; var b = (-1)[0] if(operator.length == 0){ (calTextArr[i]); } elseif(compareOperator(calTextArr[i],(-1)[0])){ do{ (()); var compareResult = compareOperator(calTextArr[i],(-1)[0]); }while(compareResult); (calTextArr[i]); } else { (calTextArr[i]); } break; } } } //穿越后,推拿符说得中肯领地元素都被压入推拿数。 (function(){ (()); }); //放弃用于对比地的特点。 (); return operand; }

ok,逆波兰表现已被主力队员。,那时we的领地格形式可以计算。,一开端就引入了计算的思惟。,更确切地说,每回他冲突单独推拿员,他计算前两个推拿数。,用运算算是替代运算表现。,大约流传一向持续到终极算是出狱。,简直我的加密出现相反地太折磨了。,我的程度对公众不完全开放的。,有单独却更的办法来索引评论区。。

/*
计算和循环算是
*/function getResult(RPNarr){
    var result;
    while(RPNarr.length > 1)
        RPNarr =  singleResult(RPNarr);    
        (RPNarr)
    result = RPNarr[0];
    return result;
}


/*
每回冲突推拿员,都使生效一次推拿和代替。,直到终极算是出狱。。
*/function singleResult(RPNarr){
    for(var i = 0,max = RPNarr.length; i < max; i++){
        (!Number(RPNarr))
        if(!号码(RPNRR)
            switch(RPNarr[i]){
                case "+":
                    var addResult = Number(RPNarr[i-2]) + 号码(RPNRR[I-1)]);
                    (i-2,3,addResult);
                    return RPNarr;
                break;
                case "-":
                    var addResult = Number(RPNarr[i-2]) - 号码(RPNRR[I-1)]);
                    (i-2,3,addResult);
                    return RPNarr;
                break;
                case "*":
                    var addResult = Number(RPNarr[i-2]) * 号码(RPNRR[I-1)]);
                    (i-2,3,addResult)
                    return RPNarr;
                break;
                case "/":
                    var addResult = Number(RPNarr[i-2]) / 号码(RPNRR[I-1)]);
                    (i-2,3,addResult)
                    return RPNarr;
                break;
            }
        }
    }
}

来这里,we的领地格形式的算术褶皱完毕了。。

那时翻书页的规划。,规划和塑造可以很轻易地在在这里了解,只需在在这里贴加密那就够了。:

根本规划与风骨:

html加密:

DOCTYPE html><html lang="en"><head><meta charset="utf-8"><link rel="stylesheet" href="">head><body><div id="calculator-container"><h1>Bett Calculatorh1><div class="calculator-display"><input id="calculator-display" type="text">div><ul class="btn-list"><li class="btn-item">1li><li class="btn-item">2li><li class="btn-item">3li><li class="btn-item">+li><li class="btn-item">4li><li class="btn-item">5li><li class="btn-item">6li><li class="btn-item">-li><li class="btn-item">7li><li class="btn-item">8li><li class="btn-item">9li><li class="btn-item">*li><li class="btn-item">.li><li class="btn-item">0li><li class="btn-item" id="result">=li><li class="btn-item">/li>ul>div><script src="">script>body>html>

css加密:

html,body,button,h1,h2,div,p,input,ul,li {
    margin: 0;
    padding: 0;
}
ul,li{
    list-style: none;
}

h1 {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
    font-weight: normal;
}
#calculator-container {
    width: 300px;
    height: auto;
    margin: 100px auto 0;
    padding: 20px 20px;
    background-color: #354B69;
    overflow: hidden;
}
.calculator-display {
    width: 100%;
    margin-bottom: 10px;
}
#calculator-display {
    display: block;
    width: 100%;
    padding: 5px 10px 5px 0;
    text-align: right;
    font-size: 18px;
    line-height: 30px;
    border: none;
    box-sizing: border-box;
}
.btn-item {
    float: left;
    width: 24%;
    padding: 6% 0;
    margin: 0.5%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #354B69;
    background-color: #fff;
}

至死的成功实现的事很长。:

好多效能还没有了解。,如清空,退格,圆括号推拿等。,他们还无添加。,有短距离虫可能性未发现本人。,这是首要的意向。,随后你可以延伸本人。,我将代替后,充满起作用。。

共有的逻辑的根本思惟:

/**

1、率先我需求将我点击的任性单独扣上钮扣(此外等号扣上钮扣外)的说法显示在input框中
2、当等号被按下时,输出框说得中肯说法被取出。
3、将接到的字母行交换为算学表现并计算
4、计算算是告发在输出框中。
5、一旦做完计算,即使再次单击该数字,则清空,即使单击了推拿符,则持续推拿。
*/

这是第单独成绩。,它是计划说得中肯计算保持健康的断定。,思考下面的思绪we的领地格形式可以有这般单独思绪(input框的value值用val表现):

a. 即使我点击普通扣上钮扣,那时运用显示框。val+=不时添加和代替愿意的,we的领地格形式称之为保持健康。“continue”(计算)

b. 即使我点击等号扣上钮扣,那时计算算是。result,那时清空搜索框并代替算是。,val = result  we的领地格形式称之为保持健康。“end”(计算完毕)

简直由于有第第五诉讼程序。,we的领地格形式的民族断定进入全部复杂。:

按下等号后,将有两个保持健康。:
a. 即使我点击推拿员,那时停止推拿。,保持健康代替为“continue”
b. 即使我点击数字,那时重新开始推拿。,在在这里we的领地格形式举办了单独新的保持健康。“start”(重新开始推拿)

这么we的领地格形式多少断定下单独扣上钮扣在等号继呢?很难作出,那时we的领地格形式只需点击普通扣上钮扣就可以做出保持健康断定。,决议多少思考保持健康在显示框中显示。。在这里举办了加密。:

设置保持健康

率先,we的领地格形式达到了单独全程变量保持健康。,默许保持健康是开端。

保持健康断定(决定因素说法是单击扣上钮扣的说法愿意的)

/*
点击普通扣上钮扣时的保持健康断定。
即使是持续保持健康,持续推拿。
即使是完毕保持健康,那时思考形形色色的的推拿停止断定。
*/function setCalState(text){
    if(calState == 完毕 && 数字(说法) ||
        (calState == 完毕 && 数字(说法) == 0)){
        calState = 开端;
    }
    elseif(calState == 完毕 && !数字(说法)){
        calState = 持续;
    }
    else {
        calState = 持续;
    }
}

发动显示的保持健康,显示框说得中肯显示也为H。:

function setInputValue(text){
    var calInput = (''calculator-display'');
    if(calState == "end" || calState == "start"){
        calInput.value = text
    }
    else{
        calInput.value += text;
    }
}

法案件泡腾规律举办每单独LI 绑定单击事变

/*
运法案件气泡向每个扣上钮扣添加点击事变。
*/function btnHandleClick(callback){
    var btnList = (''btn-list'')[0];
    btnList.onclick = function(e){
        var btnEl = e.target || window.e.target;
        if(btnEl.id == 算是){
            calState = 完毕;
var resultText = getInputValue(); var RPNarr = getRPN(resultText); var totalResult = getResult(RPNarr); callback(''''); callback(totalResult); } else{ var btnText = btnEl.innerText; setCalState(btnText); callback(btnText); } } } btnHandleClick(setInputValue);

 来这里we的领地格形式就用js做完了单独复杂的四则混合运算的反向移动,但仍在相当玩忽职守。,诸如,JS在增加的人或事物、减法、多位置的等尊重在相当行动严格的成绩。,比方 != ,它使相等

0000000000000004,像这般的严格成绩。,竟,可以在GETREST中渗出每个运算符的推拿。,诸如,增加的人或事物运算可以划分处置。
写成function add(){} ,那时停止相当紧密可作为基础的。。

一种更复杂但不引荐的办法。
竟,有单独复杂的办法。,执意EVE(说法)) ,输出字母行后,字母行说得中肯陈述将自然的使生效。,党加密做完了。,相当手巧的,但在海拔高度这是不引荐的。
这不保密的。,即使重要的人物进入了一团糟的字母行,他们将被处决。,而且一种 new 重大聚会(STR)对立保密的点法,但这是一同类似的思惟办法。
最重要的是,即使we的领地格形式运用这种办法。,we的领地格形式不克不及本人推拿推拿排出。,诸如,下面的增加的人或事物运算的行动严格的。,并且否则成绩。,因而we的领地格形式依然保存
它是一种经过自行了解混合运算的办法。。

非常重要的非常。:下面的加密简直单独思绪。,有好多详细资料还没有处置。,诸如,除数不克不及处置在0位。。缺少你能注意到。。
我相反地白。,即使从一边至另一边相称有究竟哪个有毛病的,,或许却更的认真思考办法。、办法请在评论区索引。

发表评论

电子邮件地址不会被公开。 必填项已用*标注