Javascript计算器 - 数学符号和无限-Java 学习之路

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

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>

1 回答

0
在数学中，要翻转数字的符号，您可以将它乘以（或除以） -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"] 的正文更改为：
```
return right !== 0 ? left / right : "Error!";
```
我正在使用JavaScript的Conditional Ternary Operator . 如果你想以更简单的方式做到这一点（但是第一行是1行，而这是5）：
```
if(right !== 0) {
  return left / right;
} else {
  return "Error!";
}
```
P.S这是一个令人惊讶的问题，你的问题到目前为止还没有被投入Tartarus的深处 .
回复于 2024-05-08T06:40:59+08:00

Javascript计算器 - 数学符号和无限

1 回答

相关问题