Question

我正在尝试使用基本运算符创建计算器。到目前为止，我已经运行了很多，但我正在尝试编写一个按钮来改变数字符号，从正反面改回来。我也不确定如何将零除以显示错误而不是无穷大。我知道我的代码中的数学符号目前什么也没做，我不知道该怎么做。

function clearDisplay() {
                var display = document.getElementById('display');
                display.value = '0';
                storedNum = '0';
                calculationFinished = true;
                operation = operations.none;
                }

                function clearPreviousResult() {
                var display = document.getElementById('display');
                if (calculationFinished) {
                display.value = '0';
                calculationFinished = false;
                }
            }

                function numInput(digit) {
                var display = document.getElementById('display');
                clearPreviousResult();              // Get rid of a 0 if it's the only thing in there.
                                                    // This particular way of doing it lets you enter a 0 and have it show up, as well as leaving a 0 for the decimal point to snuggle up to
                if (display.value === '0') display.value = '';
                display.value += digit;
                }

                function insertDecimal() {
                var display = document.getElementById('display');
                clearPreviousResult();
                    if (display.value.indexOf('.') === -1) display.value += '.';
                }

                operations = {
                                        // no-op. Takes the right side, and just returns it.  Since the right side is the display value, and calculate() sets display.value, this effectively makes calculate() say "display.value = +display.value".
                none:     function(left, right) { return right; },                          // Math ops.
                add:      function(left, right) { return left + right; },
                subtract: function(left, right) { return left - right; },
                multiply: function(left, right) { return left * right; },
                divide:   function(left, right) { return left / right; },
                };

                function setOperation(command) {
                var display = document.getElementById('display');
                calculate();
                storedNum = display.value;
                if (operations.hasOwnProperty(command))
                operation = operations[command];
                }

                function calculate() {
                var display = document.getElementById('display');
                display.value = operation(+storedNum, +display.value);
                calculationFinished = true;
                operation = operations.none;
                }

                if ('addEventListener' in window)
                window.addEventListener('load', clearDisplay);
                
                else
                window.attachEvent('onload', clearDisplay);

body {
    background-color: lightgrey;
}

#container {
    position: relative;
    width: 300px;
    height: 320px;
    border: 2px solid grey;
    border-radius: 4px;
    background-color: navy;
    padding: 20px;
    margin: 50px auto;
    box-shadow: 3px 2px 2px 1px black;
}

input[type=button] {
    background: lightgrey;
    width: 20%;
    font-size: 20px;
    font-weight: 900;
    font: white;
    margin: 2%;
    border-radius: 4px;
    box-shadow: 0px 0px 2px 1px black;
    outline: none;
}

#container .operator {
    width: 45%;
}

input[type=text] {
    position: relative;
    display: block;
    height: 40px;
    width: 93%;
    border: 2px solid black;
    border-radius: 5px;
    box-shadow: 0px 0px 1px black;
    margin: 5px 5px -2px 5px;
    text-align: right;
    outline: none;

    font-size: 25px;
    font-weight: bold;
    padding-right: 5px;

}

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="style.css" />
            
            <script>
            </script>
        </head>
        <body>
        <form class="calcForm" name="calculator">
            
            <input type="text" class="calcDisplay" id="display" />
            
            <div class="calcRow">
                
                <input type="button" 
                       class="calcButton" 
                       value="7" 
                       onclick="numInput('7')" />
                
                <input type="button" 
                       class="calcButton" 
                       value="8" 
                       onclick="numInput('8')" />
                
                <input type="button" 
                       class="calcButton" 
                       value="9" 
                       onclick="numInput('9')" />
                
                <input type="button" 
                       class="calcButton" 
                       value="+" 
                       onclick="setOperation('add')" />
                
            </div>
            
            <div class="calcRow">
                
                <input type="button" 
                       class="calcButton" 
                       value="4" 
                       onclick="numInput('4')" />
                
                <input type="button" 
                       class="calcButton" 
                       value="5" 
                       onclick="numInput('5')" />
                
                <input type="button" 
                       class="calcButton" 
                       value="6" 
                       onclick="numInput('6')" />
                
                <input type="button" 
                       class="calcButton" 
                       value="-" 
                       onclick="setOperation('subtract')" />
                
            </div>
            
            <div class="calcRow">
                
                <input type="button" 
                       class="calcButton" 
                       value="1" 
                       onclick="numInput('1')" />
                
                <input type="button" 
                       class="calcButton" 
                       value="2" 
                       onclick="numInput('2')" />
                
                <input type="button" 
                       class="calcButton" 
                       value="3" 
                       onclick="numInput('3')" />
                
                <input type="button" 
                       class="calcButton" 
                       value="x" 
                       onclick="setOperation('multiply')" />
                
            </div>
            
            <div class="calcRow">
                
                <input type="button" 
                       class="calcButton" 
                       value="0" 
                       onclick="numInput('0')" />
                
                <input type="button" 
                       class="calcButton" 
                       value="." 
                       onclick="insertDecimal('.')" />
                
                <input type="button" 
                       class="calcButton" 
                       value="+/-" 
                       onclick="setOperation()" />
                
                <input type="button" 
                       class="calcButton" 
                       value="/" 
                       onclick="setOperation('divide')" />
                
            </div>
            
            <div class="calcRow">
                
                <input type="button" 
                       class="calcButton" 
                       value="C" 
                       onclick="clearDisplay()" />
                
                <input type="button" 
                       class="calcButton" 
                       value="=" 
                       onclick="calculate()" />
                
            </div>
        </form>
    </body>
</html>

Answer 1

在数学中，要翻转数字符号，您可以将其乘以（或除以）resp.statusCode，所以：

-1

为防止/* you shouldn't redeclare "display" in the body of every function, just declare the one and reuse it */ var display = document.getElementById('display'); function flipSignOperation() { display.value *= -1; }除法，您可以将0的正文更改为：

operations["divide"]

我使用的是JavaScript Conditional Ternary Operator。如果你想以更简单的方式做到这一点（但是第一行是1行，而这是5行）：

return right !== 0 ? left / right : "Error!";

P。很奇怪，你的问题现在还没有被Tartarus的深度投入使用。

Javascript计算器 - 数学符号＆amp;无穷

1 个答案: