js实现网页计算器

要使用JavaScript实现一个网页计算器，你需要掌握HTML、CSS和JavaScript的基础知识。以下是一个简单的实现示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页计算器</title>
<style>
  /* 添加一些基本的样式 */
  .calculator {
    width: 300px;
    margin: auto;
  }
  input, button {
    width: 100%;
    margin-bottom: 10px;
  }
</style>
</head>
<body>
<div class="calculator">
  <input type="text" id="display" disabled>
  <button onclick="clearDisplay()">C</button>
  <button onclick="appendToDisplay('7')">7</button>
  <button onclick="appendToDisplay('8')">8</button>
  <button onclick="appendToDisplay('9')">9</button>
  <button onclick="appendToDisplay('/')">/</button>
  <button onclick="appendToDisplay('4')">4</button>
  <button onclick="appendToDisplay('5')">5</button>
  <button onclick="appendToDisplay('6')">6</button>
  <button onclick="appendToDisplay('*')">*</button>
  <button onclick="appendToDisplay('1')">1</button>
  <button onclick="appendToDisplay('2')">2</button>
  <button onclick="appendToDisplay('3')">3</button>
  <button onclick="appendToDisplay('-')">-</button>
  <button onclick="appendToDisplay('0')">0</button>
  <button onclick="calculateResult()">=</button>
  <button onclick="appendToDisplay('+')">+</button>
</div>

<script src="calculator.js"></script>
</body>
</html>

JavaScript部分（calculator.js）

function clearDisplay() {
  document.getElementById('display').value = '';
}

function appendToDisplay(value) {
  document.getElementById('display').value += value;
}

function calculateResult() {
  try {
    document.getElementById('display').value = eval(document.getElementById('display').value);
  } catch (e) {
    document.getElementById('display').value = '错误';
  }
}

解释

HTML部分：定义了计算器的结构，包括一个显示框和一系列按钮。
CSS部分：简单的样式调整，使计算器居中并美化按钮。
JavaScript部分：
- clearDisplay函数用于清空显示框。
- appendToDisplay函数用于将点击的按钮值添加到显示框。
- calculateResult函数使用eval函数计算显示框中的表达式，并显示结果。如果表达式无效，则显示“错误”。