H5简单计算器代码示例

<div id="calculator">
  <input type="text" id="result" disabled>
  <input type="button" value="1" onclick="addToResult('1')">
  <input type="button" value="2" onclick="addToResult('2')">
  <input type="button" value="3" onclick="addToResult('3')">
  <input type="button" value="+" onclick="addToResult('+')">
  <br>
  <input type="button" value="4" onclick="addToResult('4')">
  <input type="button" value="5" onclick="addToResult('5')">
  <input type="button" value="6" onclick="addToResult('6')">
  <input type="button" value="-" onclick="addToResult('-')">
  <br>
  <input type="button" value="7" onclick="addToResult('7')">
  <input type="button" value="8" onclick="addToResult('8')">
  <input type="button" value="9" onclick="addToResult('9')">
  <input type="button" value="*" onclick="addToResult('*')">
  <br>
  <input type="button" value="C" onclick="clearResult()">
  <input type="button" value="0" onclick="addToResult('0')">
  <input type="button" value="=" onclick="calculateResult()">
  <input type="button" value="/" onclick="addToResult('/')">
</div>
<script>
function addToResult(value) {
  document.getElementById('result').value += value;
}

function clearResult() {
  document.getElementById('result').value = '';
}

function calculateResult() {
  try {
    var result = eval(document.getElementById('result').value);
    document.getElementById('result').value = result;
  } catch (error) {
    alert('计算错误');
  }
}
</script>
<p>该计算器使用JavaScript实现了3个功能函数：</p>
<ol>
<li>
<p><code>addToResult()</code>函数将按键的值添加到结果输入框中。</p>
</li>
<li>
<p><code>clearResult()</code>函数清除结果输入框中的所有内容。</p>
</li>
<li>
<p><code>calculateResult()</code>函数尝试计算结果输入框中的表达式，并将结果显示在结果输入框中。如果计算错误，则会弹出一个警告框。</p>
</li>
</ol>
<p>CSS：</p>
<p>CSS样式用于为计算器添加样式。在这个例子中，我们使用了简单的CSS样式来定义计算器的外观。</p>
<p>HTML：</p>
<p>HTML代码定义了一个简单的计算器界面，包括一个结果输入框和一组数字和操作符按钮。每个按钮都有一个<code>onclick</code>属性，该属性定义了被点击时应该调用的JavaScript函数。</p>
<p>该计算器支持加、减、乘、除和清除操作。它可以处理小数和负数，但不支持括号和复杂的算术表达式。</p>
<p>这是一个基本的H5计算器示例，您可以在此基础上进行修改和扩展，以满足您的需求。</p>