3

这是我的代码，我想通过按键盘上的键来使用它，同样的简单解决方案会很有帮助。我也应该能够执行多重计算。例如。2+2+ -> 4+2+ -> 6+2= ->8。

html:

<div id="main">
     <h2>Simple Calculator</h2>

    <input id="Result" type="number" />
    <div id="keys">
        <div id="FirstRow">
            <button id="ClearAll" type="reset" value="CE" class="clean">CE</button>
            <button id="Clear" type="reset" value="C" class="clean">C</button>
            <button id="Add" type="button" value="+" class="operators operand">+</button>
        </div>
        <div id="SecondRow">
            <button id="One" type="button" value="1" class="Show">1</button>
            <button id="Two" type="button" value="2" class="Show">2</button>
            <button id="Three" type="button" value="3" class="Show">3</button>
            <button id="Sub" type="button" value="-" class="operators operand">-</button>
        </div>
        <div id="ThirdRow">
            <button id="Four" type="button" value="4" class="Show">4</button>
            <button id="Five" type="button" value="5" class="Show">5</button>
            <button id="six" type="button" value="6" class="Show">6</button>
            <button id="Mul" type="button" value="*" class="operators operand">*</button>
        </div>
        <div id="FourthRow">
            <button id="Seven" type="button" value="7" class="Show">7</button>
            <button id="Eight" type="button" value="8" class="Show">8</button>
            <button id="Nine" type="button" value="9" class="Show">9</button>
            <button id="Divide" type="button" value="/" class="operators operand">/</button>
        </div>
        <div id="FifthRow">
            <button id="Zero" type="button" value="0" class="Show">0</button>
            <button id="Dot" type="button" value="." class="Show">.</button>
            <button id="Calculate" type="button" value="=" class="operand">=</button>
        </div>
    </div>
</div>

查询：

$("document").ready(function () {
    var key = null;

    $(".clean").click(function () {
        $('input').text("");
    });

    $(".Show").click(function () {
        var EText = $('#Result').val();
        if (EText != "0") {
            var val1 = EText;
            var ButtonVal = $(this);
            var val2 = ButtonVal.text();
            var Res = val1 + val2;
            $('#Result').val(Res);
        } else {
            $('#Result').val()
        }
    });

    $(function () {
        var interRes = null;
        var operator;
        $('.operators').click(function () {
            var value1 = $('#Result').val();
            if (interRes != null) {
                var result = ApplyOperation(interRes, value1, operator);
                interRes = result;
            } else {
                interRes = value1;
            }
            operator = $(this).text();
            $('input').val("");
        });

        $('#Calculate').click(function () {
            var op = operator;
            var res;
            var value2 = $('#Result').val();
            if (value2 != "") {
                res = ApplyOperation(interRes, value2, op);
            } else {
                res = interRes;
            }
            $('#Result').val(res);
            interRes = null;
        });
    });

    function ApplyOperation(value1, value2, operator) {
        var res;
        switch (operator) {
            case "+":
                res = addition(value1, value2);
                break;
            case "-":
                res = subtraction(value1, value2);
                break;
            case "*":
                res = multiplication(value1, value2);
                break;
            case "/":
                res = division(value1, value2);
                break;
        }
        return res;
    }

    function addition(first, second) {
        var a = parseFloat(first);
        var b = parseFloat(second);
        var total = a + b;
        return total;
    }

    function subtraction(first, second) {
        var a = parseFloat(first);
        var b = parseFloat(second);
        var sub = a - b;
        return sub;
    }

    function multiplication(first, second) {
        var a = parseFloat(first);
        var b = parseFloat(second);
        var product = a * b;
        return product;
    }

    function division(first, second) {
        var a = parseFloat(first);
        var b = parseFloat(second);
        var divi = a / b;
        return divi;
    }
});
4

1 回答 1

1

看看这个JSFiddle DEMO，我已经更新了你的代码并进行了一些更改。现在它对键盘和单击按钮都可以正常工作。

    $('#Result').keypress(function (e) {
        if ((e.keyCode == 61)) {
            var op = operator;
            var res;
            var value2 = $('#Result').val();
            if ((value2 != "")) {
                var data = value2.split("+");
                if (data.length > 2) res = ApplyOperation(interRes, data[data.length - 1], op);
                else res = ApplyOperation(interRes, data[1], op);
            } else {
                res = interRes;
            }
            $('#Result').val(res);
            interRes = null;
        } else if ((e.keyCode == 43) || (e.keyCode == 45) || (e.keyCode == 42) || (e.keyCode == 47)) {
            var value1 = $('#Result').val();
            var inter = (interRes != null);
            if (inter) {
                var op = operator;
                var data = value1.split("+");
                if (data.length > 2) {
                    operator = String.fromCharCode(e.keyCode);
                    result = ApplyOperation(interRes, data[data.length - 1], op);
                    interRes = result;
                } else {
                    operator = String.fromCharCode(e.keyCode);
                    result = ApplyOperation(interRes, data[1], op);
                    interRes = result;
                }
            } else {
                interRes = value1;
            }
            operator = String.fromCharCode(e.keyCode);
            $('.input').text("");
        }
    });

我希望这会对您有所帮助。

于 2013-05-13T13:39:20.717 回答