js实现计算器功能

2026-01-30 20:10:28JavaScript

实现基础计算器功能

使用HTML、CSS和JavaScript创建一个基础计算器，支持加减乘除运算。以下是核心代码示例：

HTML结构

<div class="calculator">
  <input type="text" id="display" readonly>
  <div class="keys">
    <button onclick="appendToDisplay('7')">7</button>
    <button onclick="appendToDisplay('8')">8</button>
    <!-- 其他数字按钮 -->
    <button onclick="calculate()">=</button>
  </div>
</div>

JavaScript逻辑

js实现计算器功能

let currentInput = '';

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

function calculate() {
  try {
    const result = eval(currentInput);
    document.getElementById('display').value = result;
    currentInput = result.toString();
  } catch (error) {
    alert('Invalid calculation');
  }
}

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

增强型计算器实现

对于更复杂的计算器，建议避免使用eval()并实现更安全的计算逻辑：

const operators = {
  '+': (a, b) => a + b,
  '-': (a, b) => a - b,
  '*': (a, b) => a * b,
  '/': (a, b) => a / b
};

function safeCalculate(expression) {
  const tokens = expression.split(/([+\-*/])/).filter(token => token.trim() !== '');
  let result = parseFloat(tokens[0]);

  for (let i = 1; i < tokens.length; i += 2) {
    const operator = tokens[i];
    const operand = parseFloat(tokens[i+1]);
    if (operators[operator]) {
      result = operators[operator](result, operand);
    }
  }

  return result;
}

处理连续运算

实现记忆功能以支持连续运算：

js实现计算器功能

let memory = 0;
let lastOperator = null;

function handleOperation(op) {
  const displayValue = parseFloat(document.getElementById('display').value);

  if (lastOperator) {
    memory = operators[lastOperator](memory, displayValue);
  } else {
    memory = displayValue;
  }

  lastOperator = op;
  document.getElementById('display').value = '';
}

添加科学计算功能

扩展计算器支持平方、开方等运算：

function scientificOperation(op) {
  const displayValue = parseFloat(document.getElementById('display').value);
  let result;

  switch(op) {
    case 'sqrt': result = Math.sqrt(displayValue); break;
    case 'square': result = Math.pow(displayValue, 2); break;
    // 其他科学运算
  }

  document.getElementById('display').value = result;
  currentInput = result.toString();
}

界面优化建议

使用CSS Grid或Flexbox布局按钮
添加按钮悬停和点击效果
实现响应式设计适应不同屏幕
添加动画过渡效果提升用户体验

.calculator {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 300px;
}

button {
  padding: 15px;
  font-size: 18px;
  transition: all 0.2s;
}

button:hover {
  background-color: #ddd;
}

错误处理增强

添加更完善的输入验证和错误处理：

function validateInput(input) {
  // 检查连续运算符
  if (/[+\-*/]{2,}/.test(input)) return false;

  // 检查除零错误
  if (/\/0(?:\.0*)?([+\-*/]|$)/.test(input)) return false;

  return true;
}

function calculate() {
  if (!validateInput(currentInput)) {
    alert('Invalid expression');
    return;
  }

  // 安全计算逻辑
}