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>Simple Calculator</title>
<style>
  /* 在这里添加CSS样式 */
</style>
</head>
<body>

<div id="calculator">
  <input type="text" id="display" disabled>
  <div id="buttons">
    <!-- 按钮 -->
    <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>
</div>

<script>
  // 在这里添加JavaScript代码
</script>

</body>
</html>

接下来是CSS部分，用于设计计算器的外观：

#calculator {
  width: 200px;
  margin: auto;
}

#display {
  width: 100%;
  height: 40px;
  text-align: right;
  padding: 10px;
  font-size: 1.5em;
}

#buttons button {
  width: 48px;
  height: 48px;
  font-size: 1.5em;
  margin: 2px;
}

最后是JavaScript部分，它包含了计算器的逻辑：

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 = 'Error';
  }
}

在这个例子中，clearDisplay 函数用于清空显示屏，appendToDisplay 函数用于将用户点击的按钮值添加到显示屏上，calculateResult 函数用于计算显示屏上的表达式并显示结果。这里使用了JavaScript的 eval 函数来计算表达式的值，但请注意，eval 可能会执行恶意代码，因此在实际应用中应该使用更安全的方法来解析和计算数学表达式。

这个简单的计算器可以处理基本的算术运算，但对于更复杂的计算或者需要更高安全性的应用，你可能需要使用更专业的数学解析库，如math.js，或者实现自己的解析算法。