Question

我正在构建一个计算器，我需要这样做： - 当用户在已经添加第一个号码，操作员和第二个号码之后添加另一个操作员而没有命中相等时，屏幕显示2输入号码的结果作为第一个号码，新操作员并等待第二个号码，结果也是空的。像这样：

User clicks: 12 + 45 - 10
Screen shows: 57 - 10
And if user clicks: *
Screen shows: 47 *

由于我的方法与在线解答的问题和示例不同，这里是我的代码:(它有效，我只需要一些额外的代码）

HTML：

<button class="number" value="1"><h1>1</h1></button>
                    <button class="number" value="2"><h1>2</h1></button>
                    <button class="number" value="3"><h1>3</h1></button>
                    <button class="number" value="4"><h1>4</h1></button>
                    <button class="number" value="5"><h1>5</h1></button>
                    <button class="number" value="6"><h1>6</h1></button>
                    <button class="number" value="7"><h1>7</h1></button>
                    <button class="number" value="8"><h1>8</h1></button>
                    <button class="number" value="9"><h1>9</h1></button>
                    <button class="number" value="0"><h1>0</h1></button>

                    <button class="operator" value="plus"><h1>&plus;</h1></button>
                    <button class="operator" value="minus"><h1>&minus;</h1></button>
                    <button class="operator" value="times"><h1>&times;</h1></button>
                    <button class="operator" value="divide"><h1>&divide;</h1></button>
                    <button class="operator" value="power"><h1>^</h1></button>
                    <button class="equal" value="equals"><h1>=</h1></button>

                    <button class="clear" value="clear"><h1>clear</h1></button>

                    <h1 id="first-number"></h1>
                    <h1 id="operator"></h1>
                    <h1 id="second-number"></h1>
                    <h1 id="result"></h1>

JS：

$(document).ready(function() {
    var num1;
    var num2;
    var operator = null;
    var result;
    var a, b;
    var temp1, temp2;

    function getReady() {
        num1 = [];
        num2 = [];
        operator = null;
        result = null;
        $("#first-number").text("");
        $("#second-number").text("");
        $("#operator").text("");
        $("#result").text("");
    }

    getReady();

    $(".number").on("click", function() {
        if (!operator) {
            $("#first-number").append(this.value);
            num1.push(this.value);
            temp1 = num1.join("");
            a = parseInt(temp1);
        }
        else {
            $("#second-number").append(this.value);
            num2.push(this.value);
            temp2 = num2.join("");
            b = parseInt(temp2);
        }
    });

    $(".operator").on("click", function() {
        if (!result) {
            operator = this.value;
            $("#operator").text($(this).find("h1").text());
        }
        else {
            $("#first-number").text(result);
            num1 = result;
            a = parseInt(num1);
            operator = this.value;
            $("#operator").text($(this).find("h1").text());
            num2 = [];
            $("#second-number").text("");
            $("#result").text("");
        }
    });

    $(".equal").on("click", function() {
        switch (operator) {
            case "minus":
                result = a - b;
            break;
            case "plus":
                result = a + b;
            break;
            case "times":
                result = a * b;
            break;
            case "divide":
                result = a / b;
            break;
            case "power":
                result = Math.pow(a, b);
            break;
        }
        $("#result").text(result);
    });

    $(".clear").on("click", function() {
        getReady();
    });
});

另外，如果您有想要使用更多功能缩小代码或创建包含大多数变量和函数的var数据等对象，请告诉我。

使用jQuery进行多次计算

0 个答案: