JavaScript怎么实现网页计算器

JavaScript

小亿

2024-02-27 17:52:20

栏目: 编程语言

JavaScript可以实现网页计算器的功能，以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
<title>网页计算器</title>
</head>
<body>
<h1>网页计算器</h1>

<input type="text" id="input" readonly>
<br>
<button onclick="clearInput()">C</button>
<button onclick="appendInput('+')">+</button>
<button onclick="appendInput('-">-</button>
<button onclick="appendInput('*">*</button>
<button onclick="appendInput('/')">/</button>
<br>
<button onclick="appendInput('7')">7</button>
<button onclick="appendInput('8')">8</button>
<button onclick="appendInput('9')">9</button>
<button onclick="calculate()">=</button>
<br>
<button onclick="appendInput('4')">4</button>
<button onclick="appendInput('5')">5</button>
<button onclick="appendInput('6')">6</button>
<button onclick="appendInput('('">(</button>
<button onclick="appendInput(')')">)</button>
<br>
<button onclick="appendInput('1')">1</button>
<button onclick="appendInput('2')">2</button>
<button onclick="appendInput('3')">3</button>
<button onclick="appendInput('.')">.</button>
<br>
<button onclick="appendInput('0')">0</button>

<script>
function appendInput(value) {
  document.getElementById('input').value += value;
}

function calculate() {
  let expression = document.getElementById('input').value;
  try {
    let result = eval(expression);
    document.getElementById('input').value = result;
  } catch (error) {
    alert('输入表达式无效，请重新输入');
  }
}

function clearInput() {
  document.getElementById('input').value = '';
}
</script>
</body>
</html>

在这个示例中，我们创建了一个简单的网页计算器，用户可以在输入框中输入表达式，然后点击“=”按钮进行计算。计算器支持基本的加减乘除运算，同时也可以清除输入框中的内容。通过JavaScript的eval函数来计算输入表达式的结果。如果输入的表达式无效，会弹出一个提示框提示用户重新输入。

JavaScript怎么实现网页计算器

最新问答

相关标签