1

我需要制作一种带有按钮的“计算器”，其值为 1 到 10。然后，例如，当我按下“1”时，结果框将显示“1”，然后当我按下“4”时，结果将自动打印“5”，而无需按“=”按钮。

我只需要它来将值相加，并具有重置功能。

Javascript对我来说很新。我还不太擅长写它，但我几乎什么都懂。

真的希望有人能帮助我！

这是我当前的代码：

    <html>
<head>
<style type="text/css">
table.calc {
     border: 2px solid #0034D1;
     background-color: #809FFF;
}
input.calc {
     width: 100%;
     margin: 5px;
}
</style>

<script>
function pushButton(buttonValue) {
     if (buttonValue == 'C') {
          document.getElementById('screen').value = '';
     }
     else {
          document.getElementById('screen').value += buttonValue;
     }
}
function calculate(equation) {
     var answer = eval(equation);
     document.getElementById('screen').value = answer;
}

</script>
</head>

<body>
<table class="calc" cellpadding=4>
<tr><td colspan=3><input class="calc" id="screen" type="text"></td></tr>
<tr>
<td><input class="calc" type="button" value=1 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=2 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=3 onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=4 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=5 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=6 onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=7 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=8 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value=9 onclick="pushButton(this.value);"></td>
</tr>
<tr>
<td><input class="calc" type="button" value=0 onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='.' onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='C' onclick="pushButton(this.value);"></td>
<td><input class="calc" type="button" value='+' onclick="pushButton(this.value);"></td>
</tr>
<tr><td colspan=3><input class="calc" type="button" value='=' onclick="calculate(document.getElementById('screen').value);"></td></tr>
</table>

</body>
</html>
4

2 回答 2

1

您正在使用将字符串连接在一起的 JavaScript“功能”（字符串 + 数字也等于字符串），因此您需要parseInt围绕每个数字。另外，由于我使用的是 parseInt，需要将屏幕值设置为 0（零）而不是 ''

<input class="calc" id="screen" value="0" type="text">

然后改变这个：

function pushButton(buttonValue) {
     if (buttonValue == 'C') {
          document.getElementById('screen').value = '0';
     }
     else {
          document.getElementById('screen').value = 
            parseInt(document.getElementById('screen').value) + 
            parseInt(buttonValue);
     }
}

注意：按 。（点）或 +（加号）会导致错误。我认为你需要在按下时调用一个单独的函数。

于 2012-05-22T19:09:48.410 回答
0 
            <html>
        <head>
        <style type="text/css">
        table.calc {
             border: 2px solid #0034D1;
             background-color: #809FFF;
        }
        input.calc {
             width: 100%;
             margin: 5px;
        }
        </style>

        <script>
        function pushButton(buttonValue) {
             if (buttonValue == 'C') {
                  document.getElementById('screen').value = '0';
             }
             else {//this is where most changes occured
                    var x= document.getElementById('screen').value 
                    x =parseInt(x)+ parseInt(buttonValue);
                    document.getElementById('screen').value=x;
             }
        }
        function calculate(equation) {
             var answer = eval(equation);
             document.getElementById('screen').value = answer;
        }

        </script>
        </head>

        <body>
        <table class="calc" cellpadding=4>
        <tr><td colspan=3><input class="calc" id="screen" value='0'type="text"></td></tr>
        <tr>
        <td><input class="calc" type="button" value=1 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value=2 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value=3 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value='/' onclick="pushButton(this.value);"></td>
        </tr>
        <tr>
        <td><input class="calc" type="button" value=4 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value=5 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value=6 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value='*' onclick="pushButton(this.value);"></td>
        </tr>
        <tr>
        <td><input class="calc" type="button" value=7 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value=8 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value=9 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value='-' onclick="pushButton(this.value);"></td>
        </tr>
        <tr>
        <td><input class="calc" type="button" value=0 onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value='.' onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value='C' onclick="pushButton(this.value);"></td>
        <td><input class="calc" type="button" value='+' onclick="pushButton(this.value);"></td>
        </tr>
        <tr><td colspan=3><input class="calc" type="button" value='=' onclick="calculate(document.getElementById('screen').value);"></td></tr>
        </table>

        </body>
        </html

当您 clr 页面时，这会执行您想要的操作，但会显示 0。在将它们加在一起之前，我确保将它们设为 int。

于 2012-05-22T19:12:19.320 回答