制作JavaScript计算器

时间:2018-02-20 11:48:19

标签: javascript

我试图在网上建立一个计算器,但我在代数操作方面遇到了问题。



//function for operations
function risultato(arg) {

    var a = parseInt(document.getElementById('display').value);

    alert(a);

    var b = 4;

    somma(a, b);


    /*if(document.getElementById("x").value == "x") {
        moltiplicazione(a, b);
    }*/
}


function somma(a,b)
{
    document.getElementById("risultato").value = eval(a+b);

    var display = document.getElementById("display");

    display.innerHTML = a+b;
}

function moltiplicazione(a,b)
{
    document.getElementById("risultato").value = eval(a*b);

    var display = document.getElementById("display");

    display.innerHTML = a*b;
}

function sottrazione(a,b)
{
    document.getElementById("risultato").value = eval(a-b);

    var display = document.getElementById("display");

    display.innerHTML = a-b;
}

function divisione(a,b)
{
    document.getElementById("risultato").value = eval(a/b);

    var display = document.getElementById("display");

    display.innerHTML = a/b;
}

//function for reset
function reset() {

    var display = document.getElementById("display");

    if (display.innerHTML != "AC" ) {

        display.innerHTML = 0;

    }
}


//function for digit number
function digit(arg) {

    var display = document.getElementById("display");

    if (display.innerHTML == 0 ) {

        if (arg.innerHTML != 0) {

            display.innerHTML = arg.innerHTML;
        }
    } else {

        display.innerHTML = parseInt(display.innerHTML)*10 + parseInt(arg.innerHTML);
    }
}

<div class="calculator" id="grid-snap">

    <div class="display" id="display" >
        0
    </div>

    <div class="operator1" onClick="reset(this)">
        AC
    </div>
    <div class="operator1">
        +/-
    </div>
    <div class="operator1">
        %
    </div>
    <div class="operator2" onclick="divisione()">
        /
    </div>
    <div class="digit" onClick="digit(this);">
        7
    </div>
    <div class="digit" onClick="digit(this);">
        8
    </div>
    <div class="digit" onClick="digit(this);">
        9
    </div>
    <div class="operator2" value="x" id="x" onclick="moltiplicazione()">
        x
    </div>
    <div class="digit" onClick="digit(this);">
        4
    </div>
    <div class="digit" onClick="digit(this);">
        5
    </div>
    <div class="digit" onClick="digit(this);">
        6
    </div>
    <div class="operator2" onclick="sottrazione()">
        -
    </div>
    <div class="digit" value="1" onClick="digit(this);" id="1" >
        1
    </div>
    <div class="digit" onClick="digit(this);" id="2">
        2
    </div>
    <div class="digit" onClick="digit(this);" >
        3
    </div>
    <div class="operator2" value="+" id="+"  onclick="somma();" >
        +
    </div>
    <div class="digit big" onClick="digit(this);">
        0
    </div>

    <div class="digit">
        ,
    </div>
    <div class="operator2" type="button" value="=" id="risultato" onclick="risultato();" >
        =
    </div>

</div>
&#13;
&#13;
&#13;

关于写数字和取消我没有问题。有人可以就如何进行操作给我一些建议吗?谢谢

1 个答案:

答案 0 :(得分:1)

1)使用输入而不是可编辑的div(如果你是初学者)

2)添加一个存储名为previous

之前值的变量

3)数字按钮应将其值存储在名为current

的变量中

4)点击操作按钮点击前一个&amp;当前并对它们执行选择的操作

5)在函数中传递精确的数值或运算值 doOperation('sum'),doOperation('divide')等。 enterDigit(1),enterDigit(5)等而不是使用它。无论如何你滥用它,传递确切的值在开始时更简单。

有时您只需要输入值(输入的数字),有时您需要计算(如果以前的值存在且用户点击操作按钮)

有时只计算(等于点击次数)

您似乎完全不知道自己在做什么。如果您尝试评估显示中的操作,实际上只应显示上一个输入或上一个结果或当前输入不评估任何内容

我会更好地检查现有教程。 ex

PS:用英语命名你的变量和函数

PPS:你肯定会遇到大数字计算问题。 :)这很复杂。如果您对http://2ality.com/2012/07/large-integers.html

感兴趣,请阅读此内容