当前位置：首页 > jquery

jquery计算器

2026-03-16 11:04:36jquery

jQuery 计算器实现方法

基础结构设计

使用HTML创建计算器的基本界面结构，包含显示区域和按钮。按钮分为数字、运算符和功能键（如清除、等于）。

jquery计算器

<div class="calculator">
  <input type="text" id="display" readonly>
  <div class="buttons">
    <button class="btn">7</button>
    <button class="btn">8</button>
    <button class="btn">9</button>
    <button class="btn operator">+</button>
    <!-- 更多按钮... -->
    <button class="btn clear">C</button>
    <button class="btn equals">=</button>
  </div>
</div>

样式设计

通过CSS为计算器添加基本样式，使其更具可视化和交互性。

jquery计算器

.calculator {
  width: 200px;
  margin: 0 auto;
}
#display {
  width: 100%;
  padding: 10px;
  font-size: 18px;
}
.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.btn {
  padding: 10px;
  margin: 5px;
}

jQuery 逻辑实现

引入jQuery库并编写计算逻辑，处理按钮点击事件和运算。

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

  $('.btn').click(function() {
    const value = $(this).text();

    if (!isNaN(value) || value === '.') {
      currentInput += value;
      $('#display').val(currentInput);
    } 
    else if (value === 'C') {
      currentInput = '';
      previousInput = '';
      operation = null;
      $('#display').val('');
    }
    else if ($(this).hasClass('operator')) {
      if (currentInput === '') return;
      if (previousInput !== '') calculate();
      operation = value;
      previousInput = currentInput;
      currentInput = '';
    }
    else if (value === '=') {
      if (currentInput === '' || previousInput === '') return;
      calculate();
      operation = null;
    }
  });

  function calculate() {
    let result;
    const prev = parseFloat(previousInput);
    const current = parseFloat(currentInput);

    switch (operation) {
      case '+': result = prev + current; break;
      case '-': result = prev - current; break;
      case '*': result = prev * current; break;
      case '/': result = prev / current; break;
      default: return;
    }

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

功能扩展

可以添加更多功能，如键盘支持、历史记录或科学计算功能。

$(document).keypress(function(e) {
  const key = String.fromCharCode(e.which);
  if (/[0-9.]/.test(key)) {
    $('.btn:contains(' + key + ')').click();
  } 
  else if (['+', '-', '*', '/'].includes(key)) {
    $('.operator:contains(' + key + ')').click();
  } 
  else if (key === '=' || key === '\r') {
    $('.equals').click();
  }
});