当前位置：首页 > JavaScript

js实现计算器功能

2026-03-01 11:14:54JavaScript

实现基础计算器功能

使用HTML、CSS和JavaScript创建一个基础计算器，支持加减乘除运算。以下是一个简单的实现示例：

HTML结构

<div class="calculator">
  <input type="text" id="display" readonly>
  <div class="buttons">
    <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="appendToDisplay('.')">.</button>
    <button onclick="calculate()">=</button>
    <button onclick="appendToDisplay('/')">/</button>
    <button onclick="clearDisplay()">C</button>
  </div>
</div>

JavaScript逻辑

let display = document.getElementById('display');

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

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

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

增强计算器功能

扩展基础计算器功能，增加更多数学运算和错误处理：

js实现计算器功能

function calculate() {
  const expression = display.value;
  if (!expression) return;

  try {
    // 替换^为用于幂运算
    const sanitized = expression.replace(/\^/g, '');
    // 使用Function更安全地计算
    display.value = new Function('return ' + sanitized)();
  } catch {
    display.value = 'Error';
    setTimeout(clearDisplay, 1000);
  }
}

// 添加更多数学函数
function addFunction(func) {
  switch(func) {
    case 'sqrt':
      appendToDisplay('Math.sqrt(');
      break;
    case 'sin':
      appendToDisplay('Math.sin(');
      break;
    // 添加更多函数...
  }
}

使用事件监听器改进

改用事件监听器而非内联事件处理：

document.querySelectorAll('.buttons button').forEach(button => {
  button.addEventListener('click', () => {
    const value = button.textContent;
    if (value === '=') {
      calculate();
    } else if (value === 'C') {
      clearDisplay();
    } else {
      appendToDisplay(value);
    }
  });
});

实现科学计算器

扩展为科学计算器，支持更多高级功能：

const scientificFunctions = {
  'sin': Math.sin,
  'cos': Math.cos,
  'tan': Math.tan,
  'log': Math.log10,
  'ln': Math.log,
  'π': Math.PI,
  'e': Math.E
};

function handleScientificFunction(func) {
  if (func in scientificFunctions) {
    if (['π', 'e'].includes(func)) {
      appendToDisplay(scientificFunctions[func]);
    } else {
      appendToDisplay(`${func}(`);
    }
  }
}

键盘支持实现

添加键盘事件支持：

js实现计算器功能

document.addEventListener('keydown', (e) => {
  if (/[0-9\.\+\-\*\/]/.test(e.key)) {
    appendToDisplay(e.key);
  } else if (e.key === 'Enter') {
    calculate();
  } else if (e.key === 'Escape') {
    clearDisplay();
  } else if (e.key === 'Backspace') {
    display.value = display.value.slice(0, -1);
  }
});

表达式验证

添加输入验证防止非法表达式：

function appendToDisplay(value) {
  const current = display.value;
  const lastChar = current.slice(-1);

  // 防止重复运算符
  if (/[\+\-\*\/]/.test(value) && /[\+\-\*\/]/.test(lastChar)) {
    return;
  }

  // 防止以运算符开头
  if (!current && /[\+\-\*\/]/.test(value)) {
    return;
  }

  display.value += value;
}

使用Math.js库

对于更复杂的数学运算，可以集成math.js库：

// 引入math.js后
function calculate() {
  try {
    display.value = math.evaluate(display.value);
  } catch {
    display.value = 'Error';
  }
}

实现记忆功能

添加记忆存储和读取功能：

let memory = 0;

function memoryAdd() {
  memory += parseFloat(display.value) || 0;
}

function memoryRecall() {
  display.value = memory;
}

function memoryClear() {
  memory = 0;
}

这些实现方法可以根据需求组合使用，创建一个功能完善的JavaScript计算器。