JavaScript实例-实现计算器

JavaScript实例–实现计算器

2023年5月27日下午10:57 • JavaScript

下面是“JavaScript实例--实现计算器”的完整攻略。

1. 需求分析

在开始编写代码之前，我们需要先确定需求。计算器需要实现以下功能：

实现加、减、乘、除四则运算
实现小数点的输入和计算
实现清除和退格功能
实现等号的计算

2. 页面结构和样式

我们需要创建一个HTML页面，包含一个输入框、数字按钮、四则运算按钮和其他功能按钮，如清除和退格按钮等。对应的HTML结构可以参考以下示例：

<div class="calculator">
  <input type="text" id="result" />
  <button class="number" id="btn-1">1</button>
  <button class="number" id="btn-2">2</button>
  <button class="number" id="btn-3">3</button>
  <button class="operator" id="btn-add">+</button>
  <button class="number" id="btn-4">4</button>
  <button class="number" id="btn-5">5</button>
  <button class="number" id="btn-6">6</button>
  <button class="operator" id="btn-sub">-</button>
  <button class="number" id="btn-7">7</button>
  <button class="number" id="btn-8">8</button>
  <button class="number" id="btn-9">9</button>
  <button class="operator" id="btn-mul">*</button>
  <button class="clear" id="btn-clear">C</button>
  <button class="number" id="btn-0">0</button>
  <button class="decimal" id="btn-dot">.</button>
  <button class="operator" id="btn-div">/</button>
  <button class="backspace" id="btn-backspace">←</button>
  <button class="equal" id="btn-equal">=</button>
</div>

我们需要为计算器添加样式，在CSS中添加样式。

3. JavaScript代码实现

3.1 获取DOM元素并添加事件监听器

const result = document.querySelector('#result');
const numbers = document.querySelectorAll('.number');
const operators = document.querySelectorAll('.operator');
const clear = document.querySelector('#btn-clear');
const backspace = document.querySelector('#btn-backspace');
const equal = document.querySelector('#btn-equal');
const decimal = document.querySelector('#btn-dot');

for (let i = 0; i < numbers.length; i++) {
  numbers[i].addEventListener('click', function () {
    appendNumber(numbers[i].textContent);
  });
}

for (let i = 0; i < operators.length; i++) {
  operators[i].addEventListener('click', function () {
    selectOperator(operators[i].textContent);
  });
}

clear.addEventListener('click', function () {
  clearResult();
});

backspace.addEventListener('click', function () {
  deleteNumber();
});

decimal.addEventListener('click', function () {
  addDecimal();
});

equal.addEventListener('click', function () {
  calculateResult();
});

3.2 实现函数

下面我们将实现函数，包括：

appendNumber
selectOperator
clearResult
deleteNumber
addDecimal
calculateResult

let currentInput = '';
let previousInput = '';
let operator = null;
let isNewOperation = false;

function appendNumber(number) {
  if (isNewOperation) {
    currentInput = number;
    isNewOperation = false;
  } else {
    currentInput += number;
  }

  updateScreen();
}

function selectOperator(selectedOperator) {
  if (operator !== null) {
    calculateResult();
  }

  previousInput = currentInput;
  currentInput = '';
  operator = selectedOperator;
}

function clearResult() {
  currentInput = '';
  previousInput = '';
  operator = null;
  isNewOperation = false;

  updateScreen();
}

function deleteNumber() {
  currentInput = currentInput.slice(0, -1);

  updateScreen();
}

function addDecimal() {
  if (currentInput === '') {
    currentInput += '0.';
  } else if (currentInput.indexOf('.') === -1) {
    currentInput += '.';
  }

  updateScreen();
}

function calculateResult() {
  const currentValue = parseFloat(currentInput);
  const previousValue = parseFloat(previousInput);

  if (isNaN(currentValue) || isNaN(previousValue)) {
    return;
  }

  switch (operator) {
    case '+':
      currentInput = previousValue + currentValue;
      break;
    case '-':
      currentInput = previousValue - currentValue;
      break;
    case '*':
      currentInput = previousValue * currentValue;
      break;
    case '/':
      currentInput = previousValue / currentValue;
      break;
    default:
      return;
  }

  isNewOperation = true;
  operator = null;

  updateScreen();
}

function updateScreen() {
  result.value = currentInput;
}

clearResult();