0

我的 HTML 计算器不会显示输入或结果。如果可能的话，我想保留我的布局和设计。我只用 HTML 代码制作了这个计算器。我希望它是在一个预先存在的网站上的基础。我尝试过使用 JavaScript 和 jQuery，但我对它的理解还不够好，无法让它运行。我也尝试了一些调试软件，但他们还没有缩小问题的范围。

HTML计算器的代码：

body {
  background-color: #FFFFFF;
  background-size: 1500px;
}

#calculator {
  width: 250px;
  height: 375px;
  text-align: center;
  margin: 90px auto;
  box-shadow: 10px 10px 10px #010012;
  background-color: #229EE2;
  background-size: 7px;
  border-radius: 30px;
  border: 3px solid #595959;
}

#display {
  margin: 30px 0 20px 0;
  padding-right: 2%;
  width: 220px;
  height: 30px;
  border-radius: 4px;
  box-shadow: 0px 0px 3px #595959;
  text-align: right;
  font: 27px bold;
  color: #1A3C67;
  background-color: #78c4ed;
}

#keys {
  width: 43px;
  height: 35px;
  margin-left: 10px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 15px #010012;
  cursor: pointer;
  font-style: italic;
  color: lightblue;
  background-color: rgb(0, 50, 68);
  font-weight: bold;
  font-size: 24px;
  border-radius: 4px;
}

#keys:hover {
  background: #1998cd;
  font-weight: bold;
  color: #1e185e;
}

#keysC {
  width: 43px;
  height: 35px;
  margin-left: 10px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 10px #595959;
  cursor: pointer;
  font-style: italic;
  color: #1A3C67;
  background-color: lightblue;
  font-weight: bold;
  font-size: 16px;
  border-radius: 4px;
}

#keysC:hover {
  background: #7caad0;
  font-weight: bold;
  color: #1A3C67;
}
<html>

<head>
  <title>Financial Calculator</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div id="calculator">
    <div class="fluid-container">
      <form name="Financial Calculator">
        <input type="textfield" id="display" name="ans" value="" class="form-control" placeholder="">
        <br>
        <div class="row">
          <div>
            <input type="reset" id="keysC" value="C">
            <input type="reset" id="keysC" value="CE">
            <input type="button" id="keysC" value="<--">
            <input type="button" id="keysC" value="%" onClick="document.calculator.ans.value+='%'">
          </div>
        </div>
        <br>
        <input type="button" id="keys" value="7" onClick="document.calculator.ans.value+='7'">
        <input type="button" id="keys" value="8" onClick="document.calculator.ans.value+='8'">
        <input type="button" id="keys" value="9" onClick="document.calculator.ans.value+='9'">
        <input type="button" id="keysC" value="/" onClick="document.calculator.ans.value+='/'">
        <br>
        <input type="button" id="keys" value="4" onClick="document.calculator.ans.value+='4'">
        <input type="button" id="keys" value="5" onClick="document.calculator.ans.value+='5'">
        <input type="button" id="keys" value="6" onClick="document.calculator.ans.value+='6'">
        <input type="button" id="keysC" value="*" onClick="document.calculator.ans.value+='*'">
        <br>
        <input type="button" id="keys" value="1" onClick="document.calculator.ans.value+='1'">
        <input type="button" id="keys" value="2" onClick="document.calculator.ans.value+='2'">
        <input type="button" id="keys" value="3" onClick="document.calculator.ans.value+='3'">
        <input type="button" id="keysC" value="-" onClick="document.calculator.ans.value+='-'">
        <br>
        <input type="button" id="keys" value="0" onClick="document.calculator.ans.value+='0'">
        <input type="button" id="keys" value="." onClick="document.calculator.ans.value+='.'">
        <input type="button" id="keys" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
        <input type="button" id="keysC" value="+" onClick="document.calculator.ans.value+='+'">
      </form>
    </div>
  </div>
</body>

</html>

4

3 回答 3

1

首先，您写onClick的是 ，但实际上是onclick，因为它在那里区分大小写。

其次，你写了document.calculator.ans.value，这是行不通的。相反，你所需要的只是ans.value，你应该没问题。

下面我包含了您的计算器的 HTML 代码，以显示您想要的内容（它有效）

body {
  background-color: #FFFFFF;
  background-size: 1500px;
}

#calculator {
  width: 250px;
  height: 375px;
  text-align: center;
  margin: 90px auto;
  box-shadow: 10px 10px 10px #010012;
  background-color: #229EE2;
  background-size: 7px;
  border-radius: 30px;
  border: 3px solid #595959;
}

#display {
  margin: 30px 0 20px 0;
  padding-right: 2%;
  width: 220px;
  height: 30px;
  border-radius: 4px;
  box-shadow: 0px 0px 3px #595959;
  text-align: right;
  font: 27px bold;
  color: #1A3C67;
  background-color: #78c4ed;
}

#keys {
  width: 43px;
  height: 35px;
  margin-left: 10px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 15px #010012;
  cursor: pointer;
  font-style: italic;
  color: lightblue;
  background-color: rgb(0, 50, 68);
  font-weight: bold;
  font-size: 24px;
  border-radius: 4px;
}

#keys:hover {
  background: #1998cd;
  font-weight: bold;
  color: #1e185e;
}

#keysC {
  width: 43px;
  height: 35px;
  margin-left: 10px;
  margin-bottom: 20px;
  box-shadow: 0px 0px 10px #595959;
  cursor: pointer;
  font-style: italic;
  color: #1A3C67;
  background-color: lightblue;
  font-weight: bold;
  font-size: 16px;
  border-radius: 4px;
}

#keysC:hover {
  background: #7caad0;
  font-weight: bold;
  color: #1A3C67;
}
    <!DOCTYPE html>
    <html>

    <head>
      <title>Financial Calculator</title>
      <link rel="stylesheet" type="text/css" href="style123.css">
    </head>

      <body>
        <div id="calculator">
        <div class="fluid-container">
          <form name="Financial Calculator">
            <input type="text" id="display" name="ans" value="" class="form-control" placeholder="">
            <br>
            <div class="row">
              <div>
                <input type="reset" id="keysC" value="C">
                <input type="reset" id="keysC" value="CE">
                <input type="button" id="keysC" value="<--">
                <input type="button" id="keysC" value="%" onclick="ans.value+='%'">
              </div>
            </div>
            <br>
            <input type="button" id="keys" value="7" onclick="ans.value+='7'">
            <input type="button" id="keys" value="8" onclick="ans.value+='8'">
            <input type="button" id="keys" value="9" onclick="ans.value+='9'">
            <input type="button" id="keysC" value="/" onclick="ans.value+='/'">
            <br>
            <input type="button" id="keys" value="4" onclick="ans.value+='4'">
            <input type="button" id="keys" value="5" onclick="ans.value+='5'">
            <input type="button" id="keys" value="6" onclick="ans.value+='6'">
            <input type="button" id="keysC" value="*" onclick="ans.value+='*'">
            <br>
            <input type="button" id="keys" value="1" onclick="ans.value+='1'">
            <input type="button" id="keys" value="2" onclick="ans.value+='2'">
            <input type="button" id="keys" value="3" onclick="ans.value+='3'">
            <input type="button" id="keysC" value="-" onclick="ans.value+='-'">
            <br>
            <input type="button" id="keys" value="0" onclick="ans.value+='0'">
            <input type="button" id="keys" value="." onclick="ans.value+='.'">
            <input type="button" id="keys" value="=" onclick="ans.value=eval(ans.value)">
            <input type="button" id="keysC" value="+" onclick="ans.value+='+'">
          </form>
        </div>
      </div>
    </body>

    </html>

于 2018-08-23T02:20:36.160 回答
0

这是一个简单的计算器

#calc
{
width:300px;height:250px;background-color: pink; color: black;
}
#btn
{
width:100%;height:40px;font-size:20px;width: 40px;background-color: blue; padding-right: 10px
}
form Name="calc">
<table id="calc" border=2>
<tr>
<td colspan=5><input style="width:300px; height: 40px; font-size: 20px " name="display" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"></td>
<td style="display:none"><input name="M" type="number"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MC" OnClick="calc.M.value=''"></td>
<td><input id="btn" type=button value="0" OnClick="calc.display.value+='0'"></td>
<td><input id="btn" type=button value="1" OnClick="calc.display.value+='1'"></td>
<td><input id="btn" type=button value="2" OnClick="calc.display.value+='2'"></td>
<td><input id="btn" type=button value="+" OnClick="calc.display.value+='+'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MS" OnClick="calc.M.value=calc.display.value"></td>
<td><input id="btn" type=button value="3" OnClick="calc.display.value+='3'"></td>
<td><input id="btn" type=button value="4" OnClick="calc.display.value+='4'"></td>
<td><input id="btn" type=button value="5" OnClick="calc.display.value+='5'"></td>
<td><input id="btn" type=button value="-" OnClick="calc.display.value+='-'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="MR" OnClick="calc.display.value=calc.M.value"></td>
<td><input id="btn" type=button value="6" OnClick="calc.display.value+='6'"></td>
<td><input id="btn" type=button value="7" OnClick="calc.display.value+='7'"></td>
<td><input id="btn" type=button value="8" OnClick="calc.display.value+='8'"></td>
<td><input id="btn" type=button value="x" OnClick="calc.display.value+='*'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="M+" OnClick="calc.M.value=(Number(calc.M.value))+(Number(calc.display.value))"></td>
<td><input id="btn" type=button value="9" OnClick="calc.display.value+='9'"></td>
<td><input id="btn" type=button value="±" OnClick="calc.display.value=(calc.display.value==Math.abs(calc.display.value)?-(calc.display.value):Math.abs(calc.display.value))">
</td>
<td><input id="btn" type=button value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
<td><input id="btn" type=button value="÷" OnClick="calc.display.value+='/'"></td>
</tr>
<tr>
<td><input id="btn" type=button value="1/x" OnClick="calc.display.value=1/calc.display.value"></td>
<td><input id="btn" type=button value="." OnClick="calc.display.value+='.'"></td>
<td><input id="btn" type=button value="x2" OnClick="calc.display.value=Math.pow(calc.display.value,2)"></td>
<td><input id="btn" type=button value="√" OnClick="calc.display.value=Math.sqrt(calc.display.value)"></td>
<td><input id="btn" type=button value="C" OnClick="calc.display.value=''"></td>
</tr>
</table>
</form>

于 2019-10-31T02:56:19.387 回答
0

HTMLid必须是唯一的，因此您不能使用id="key". 您可以轻松地将所有id标签切换为class标签。不要忘记css选择器！

onclick（注意全部小写）必须是一个函数。一种简单的方法是使用<script>标记声明一个，然后在按钮的 onclick 标记中调用该函数。

前任：

<script>
  function keyOnClick(symbol) {
    document.getElementById('display').value += symbol
  }
</script>
<input type="button" class="key" value="7" onclick="keyOnCick(this.value)">
于 2018-05-09T22:42:00.723 回答