jquery计算器

以下是一个基于jQuery实现的简单计算器代码示例，包含基本加减乘除功能，可直接嵌入网页使用：

HTML结构

<div class="calculator">
  <input type="text" class="display" readonly>
  <div class="keys">
    <button data-value="7">7</button>
    <button data-value="8">8</button>
    <button data-value="9">9</button>
    <button data-operator="+">+</button>
    <button data-value="4">4</button>
    <button data-value="5">5</button>
    <button data-value="6">6</button>
    <button data-operator="-">-</button>
    <button data-value="1">1</button>
    <button data-value="2">2</button>
    <button data-value="3">3</button>
    <button data-operator="*">×</button>
    <button data-value="0">0</button>
    <button class="clear">C</button>
    <button class="equal">=</button>
    <button data-operator="/">÷</button>
  </div>
</div>

CSS样式

.calculator {
  width: 200px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 10px;
}
.display {
  width: 100%;
  margin-bottom: 10px;
  padding: 5px;
  font-size: 18px;
}
.keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
button {
  padding: 10px;
  font-size: 16px;
}

jQuery逻辑

$(document).ready(function() {
  let currentInput = '';
  let previousInput = '';
  let operation = null;

  $('.keys button').click(function() {
    const value = $(this).data('value');
    const operator = $(this).data('operator');

    if (value !== undefined) {
      currentInput += value;
      $('.display').val(currentInput);
    }

    if (operator !== undefined) {
      if (currentInput !== '') {
        previousInput = currentInput;
        currentInput = '';
        operation = operator;
      }
    }

    if ($(this).hasClass('clear')) {
      currentInput = '';
      previousInput = '';
      operation = null;
      $('.display').val('');
    }

    if ($(this).hasClass('equal') && previousInput !== '' && currentInput !== '' && operation) {
      const num1 = parseFloat(previousInput);
      const num2 = parseFloat(currentInput);
      let result;

      switch(operation) {
        case '+': result = num1 + num2; break;
        case '-': result = num1 - num2; break;
        case '*': result = num1 * num2; break;
        case '/': result = num1 / num2; break;
      }

      $('.display').val(result);
      currentInput = result.toString();
      previousInput = '';
      operation = null;
    }
  });
});

功能扩展建议

• 添加小数点支持：在数字按钮中添加小数点按钮，并处理输入验证
• 添加百分比计算功能：增加百分比按钮和相应逻辑
• 添加正负号切换：实现数值符号切换功能
• 添加记忆功能：使用localStorage存储历史计算结果
• 响应式设计：通过CSS媒体查询适配不同屏幕尺寸

实现时需注意：

• 处理除以零的错误情况
• 限制输入长度防止溢出
• 格式化显示结果（如固定小数位数）
• 添加按钮点击的视觉反馈效果

完整代码需引入jQuery库：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>