用JavaScript实现一个简易计算器功能

将详细介绍如何使用 JavaScript 实现一个 简易计算器。计算器功能包括基本的加、减、乘、除运算。以下是具体步骤和代码示例。

步骤一：设置HTML结构

创建一个简单的 HTML 结构来展示计算器的输入和操作按钮。例如，可以使用 <input> 元素来展示结果区域，并使用多个 <button> 元素来表示数字和操作符。

  <input disabled="" id="display" type="text"/>
  <button onclick="appendNumber('1')">1</button>
  <!-- 继续添加其他按钮 -->

步骤二：定义JavaScript函数

我们将定义几个 JavaScript 函数来处理用户输入并更新显示内容。

1. 添加数字和操作符

function appendNumber(num) {
  const display = document.getElementById('display');
  display.value += num;
}

2. 清除屏幕

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

3. 计算结果

function calculate() {
  const display = document.getElementById('display');
  try {
    display.value = eval(display.value);
  } catch (error) {
    display.value = 'Error';
  }
}

步骤三：添加样式

通过 CSS 为计算器样式进行简单的美化，例如使用 flexbox 进行布局。

.calculator {
  display: flex;
  flex-direction: column;
  /* 其他样式 */
}

至此，一个简易的JavaScript计算器就完成了，用户可以进行基本的运算。